chore(i18n,learn): processed translations (#50821)

2026-09-24 23:01:18 +08:00 · 2023-06-26 19:56:15 +05:30
parent c1c5b941d8
commit 485b4772c6
329 changed files with 1229 additions and 1170 deletions
@@ -61,6 +61,12 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
 assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
 ```

+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
 # --seed--

 ## --seed-contents--
@@ -1,10 +1,10 @@
 ---
 id: 647f7da207d29547b3bee1ba
-title: 'Foundational C# with Microsoft Certification'
+title: '基礎 C# 和微軟認證'
 certification: foundational-c-sharp-with-microsoft
 challengeType: 7
 isPrivate: true
 tests:
  - 
    id: 647e22d18acb466c97ccbef8
-    title: 'Foundational C# with Microsoft Certification Exam'
+    title: '基礎 C# 和微軟認證考試'
@@ -26,7 +26,7 @@ HTML5 的 `audio` 標籤用於呈現音頻內容或音頻流，它也具有語

 # --instructions--

-是時候讓 Camper Cat 休息一下，並與朋友 Zersiax (@zersiax) 會面了。 Zersiax 是一位屏幕閱讀器用戶，同時也是無障礙設計的高手。 To hear a clip of his screen reader in action, add an `audio` element after the `p` element. 具有 `controls` 屬性。 Then place a `source` element inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.
+是時候讓 Camper Cat 休息一下，並與朋友 Zersiax (@zersiax) 會面了。 Zersiax 是一位屏幕閱讀器用戶，同時也是無障礙設計的高手。 爲了體驗屏幕閱讀器的朗讀效果，請在 `p` 元素之後添加一個 `audio` 元素， 具有 `controls` 屬性。 然後在 `audio` 標籤裏面放一個帶有 `src` 屬性的 `source` 標籤，屬性值爲 `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`。將 `type` 屬性設置爲 `"audio/mpeg"`.

 **注意：** 音頻片段的播放速度可能會快到令我們難以理解，但是對於屏幕閱讀器用戶來說這是正常速度。

@@ -8,7 +8,7 @@ dashedName: iterate-through-the-keys-of-an-object-with-a-for---in-statement

 # --description--

-Sometimes you need to iterate through all the keys within an object. You can use a <dfn>for...in</dfn> loop to do this. The for...in loop looks like:
+有時候你需要遍歷一個對象中的所有鍵。 你可以使用 <dfn>for...in</dfn> 循環來做這件事。 for...in 循環是這樣的：

 ```javascript
 const refrigerator = {
@@ -21,15 +21,15 @@ for (const food in refrigerator) {
 }
 ```

-This code logs `milk 1`  and `eggs 12`, with each key-value pair on its own line.
+以上代碼記錄 `milk 1` 和 `eggs 12`，每個鍵值對單獨爲一行。

-We defined the variable `food` in the loop head and this variable was set to each of the object's keys on each iteration, resulting in each food's name being printed to the console.
+我們在循環頭中定義了變量 `food` ，這個變量被設置爲每次迭代上對象的每個鍵值，將每個食物的名稱打印到控制檯。

 **注意：**對象中的鍵是無序的，這與數組不同。 因此，一個對象中某個屬性的位置，或者說它出現的相對順序，在引用或訪問該屬性時是不確定的。

 # --instructions--

-We've defined a function `countOnline` which accepts one argument, `allUsers`. Use a <dfn>for...in</dfn> statement inside this function to loop through the `allUsers` object and return the number of users whose `online` property is set to `true`. An example of an object which could be passed to `countOnline` is shown below. Each user will have an `online` property set to either `true` or `false`.
+我們定義了一個函數 `countOnline`，它接收一個參數 `allUsers`。 在這個函數中使用 <dfn>for...in</dfn> 語句來遍歷 `allUsers` 對象，並返回 `online` 屬性爲 `true` 的用戶數量。 一個可以傳遞給 `countOnline` 的對象的例子顯示如下。 每個用戶都有 `online` 屬性，其屬性值爲 `true` 或 `false`。

 ```js
 {
@@ -51,7 +51,7 @@ assert(gloveBoxContents === 'maps');
 assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
 ```

-`gloveBoxContents` should still be declared with `const`.
+應該用 `const` 聲明 `gloveBoxContents`。

 ```js
 assert.match(code, /const\s+gloveBoxContents\s*=/)
@@ -9,25 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript

 # --description--

-You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
+你可以用 `Math.random()` 生成隨機的小數，但有時你需要生成隨機的整數。 下面的流程將給你一個小於 `20` 的隨機整數：

-1. Use `Math.random()` to generate a random decimal number.
-2. Multiply that random decimal number by `20`.
-3. Use `Math.floor()` to round this number down to its nearest whole number.
+1. 用 `Math.random()` 生成一個隨機小數。
+2. 把這個隨機小數乘以 `20`。
+3. 用 `Math.floor()` 向下取整，獲得它最近的整數。

-Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
+記住 `Math.random()` 永遠不能完全返回 `1`，所以不可能實際得到 `20`，因爲你正在用 `Math.floor()` 四捨五入。 這個流程將給你一個從 `0` 到 `19` 的隨機整數。

-Putting everything together, this is what your code looks like:
+把操作連起來，代碼類似於下面：

 ```js
 Math.floor(Math.random() * 20);
 ```

-You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
+你將調用 `Math.random()`，把結果乘以 20，然後把值傳給 `Math.floor()`，向下取整獲得最近的整數。

 # --instructions--

-Use this technique to generate and return a random whole number in the range from `0` to `9`.
+使用這個方法生成並返回 `0` 和 `9` 之間的隨機整數。

 # --hints--

@@ -49,7 +49,7 @@ assert(
 assert(code.match(/Math.random/g).length >= 1);
 ```

-You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
+應該將 `Math.random` 的結果乘以 10，以生成 0 到 9 之間的隨機數。

 ```js
 assert(
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range

 # --description--

-You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
+你可以在從零到給定數字的範圍內生成隨機整數。 你也可以爲此範圍選擇一個不同的較小數字。

-You'll call your minimum number `min` and your maximum number `max`.
+你將把最小的數字定義爲 `min`，把最大的數字定義爲 `max`。

-This formula gives a random whole number in the range from `min` to `max`. 仔細看看並嘗試理解這行代碼到底在幹嘛：
+這個公式將生成一個從 `min` 到 `max` 的隨機整數。 仔細看看並嘗試理解這行代碼到底在幹嘛：

 ```js
 Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min

 # --instructions--

-Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
+創建一個函數 `randomRange`，參數爲 `myMin` 和 `myMax`，返回一個在 `myMin`（包括 myMin）和 `myMax`（包括 myMax）之間的隨機整數。

 # --hints--

@@ -22,7 +22,7 @@ dashedName: record-collection
 -   你的函數必須始終返回整個 `records` 對象。
 -   如果 `value` 是空字符串，從專輯裏刪除指定的 `prop`。
 -   如果 `prop` 不是 `tracks`，並且 `value` 不是一個空字符串，將 `value` 賦給那個專輯的 `prop`。
-   If `prop` is `tracks` and `value` isn't an empty string, you need to update the album's `tracks` array. First, if the album does not have a `tracks` property, assign it an empty array. Then add the `value` as the last item in the album's `tracks` array.
+-   如果 `prop` 是 `tracks` 並且 `value` 不是一個空字符串，你需要更新專輯的 `tracks` 數組。 首先，如果專輯沒有 `tracks` 屬性，賦予它一個空數組。 然後添加 `value` 作爲專輯的 `tracks` 數組的最後一個項目。

 **注意：** 將 `recordCollection` 對象的副本用於測試。 你不應該直接修改 `recordCollection` 對象。

@@ -8,7 +8,7 @@ dashedName: testing-objects-for-properties

 # --description--

-To check if a property on a given object exists or not, you can use the `.hasOwnProperty()` method. `someObject.hasOwnProperty(someProperty)` returns `true` or `false` depending on if the property is found on the object or not.
+要檢查某個對象是否具有一個屬性，你可以使用 `.hasOwnProperty()` 方法。 根據對象是否具有該屬性，`someObject.hasOwnProperty(someProperty)` 返回 `true` 或 `false`。

 **示例**

@@ -21,11 +21,11 @@ checkForProperty({ top: 'hat', bottom: 'pants' }, 'top'); // true
 checkForProperty({ top: 'hat', bottom: 'pants' }, 'middle'); // false
 ```

-The first `checkForProperty` function call returns `true`, while the second returns `false`.
+第一個 `checkForProperty` 函數返回 `true`，第二個返回 `false`。

 # --instructions--

-Modify the function `checkObj` to test if the object passed to the function parameter `obj` contains the specific property passed to the function parameter `checkProp`. If the property passed to `checkProp` is found on `obj`, return that property's value. If not, return `Not Found`.
+修改函數 `checkObj` 以檢查傳給函數參數的對象 `obj` 是否包含傳給函數參數的屬性 `checkProp`。 如果在 `obj` 中找到傳給 `checkProp` 的屬性，則返回該屬性的值。 如果沒有，則返回 `Not Found`。

 # --hints--

@@ -65,7 +65,7 @@ assert.isFunction(Thermostat);
 assert.isFunction(Thermostat?.constructor);
 ```

-The `class` keyword should be used.
+應該使用 `class` 關鍵字。

 ```js
 assert.match(code, /class/);
@@ -28,13 +28,13 @@ const maximus = Math.max(...arr);

 `maximus` 的值應該是 `89`。

-`...arr` 返回一個解壓的數組。 In other words, it spreads the array. 然而，展開操作符只能夠在函數的參數中或者數組中使用。 For example:
+`...arr` 返回一個解壓縮的數組。 換句話說，它展開了數組。 然而，展開操作符只能夠在函數的參數中或者數組中使用。 例如：

 ```js
 const spreaded = [...arr];
 ```

-However, the following code will not work:
+下面的代碼將不能運行：

 ```js
 const spreaded = ...arr;
@@ -42,23 +42,23 @@ const spreaded = ...arr;

 # --instructions--

-Copy all contents of `arr1` into another array `arr2` using the spread operator.
+使用展開操作符將 `arr1` 中的全部內容複製到另一個數組 `arr2` 中。

 # --hints--

-`arr2` should be correct copy of `arr1`.
+`arr2` 應該是從 `arr1` 複製而來。

 ```js
 assert(arr2.every((v, i) => v === arr1[i]) && arr2.length);
 ```

-`...` spread operator should be used to duplicate `arr1`.
+應使用展開操作符 `...` 來複制 `arr1`。

 ```js
 assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
 ```

-`arr2` should remain unchanged when `arr1` is changed.
+當 `arr1` 改變的時候，`arr2` 應保持不變。

 ```js
 assert((arr1, arr2) => {
@@ -36,43 +36,43 @@ assert.deepEqual(addTogether(2, 3), 5);
 assert.deepEqual(addTogether(23, 30), 53);
 ```

-`addTogether("2", 3)` should return `undefined`.
+`addTogether("2", 3)` 應返回 `undefined`。

 ```js
 assert.isUndefined(addTogether('2', 3));
 ```

-`addTogether(5, undefined)` should return `undefined`.
+`addTogether(5, undefined)` 應返回 `undefined`。

 ```js
 assert.isUndefined(addTogether(5, undefined));
 ```

-`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` should return `undefined`.
+`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` 應返回 `undefined`。

 ```js
 assert.isUndefined(addTogether('https://www.youtube.com/watch?v=dQw4w9WgXcQ'));
 ```

-`addTogether(5)` should return a function.
+`addTogether(5)` 應返回一個函數。

 ```js
 assert.deepEqual(typeof(addTogether(5)), 'function');
 ```

-`addTogether(5)(7)` should return 12.
+`addTogether(5)(7)` 應返回 12。

 ```js
 assert.deepEqual(addTogether(5)(7), 12);
 ```

-`addTogether(2)([3])` should return `undefined`.
+`addTogether(2)([3])` 應返回 `undefined`。

 ```js
 assert.isUndefined(addTogether(2)([3]));
 ```

-`addTogether(2, "3")` should return `undefined`.
+`addTogether(2, "3")` 應返回 `undefined`。

 ```js
 assert.isUndefined(addTogether(2, '3'));
@@ -18,7 +18,7 @@ Font Awesome 是一個非常便利的圖標庫。 這些圖標可以是網絡字

 爲 info 按鈕添加 Font Awesome `info-circle` 圖標，delete 按鈕添加 `trash` 圖標。

-**Note:** You can use either `i` or `span` elements to complete this challenge.
+**注意：** 你可以使用 `i` 或 `span` 元素來完成此挑戰。

 # --hints--

@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery

 現在學習用 jQuery 從頁面移除 HTML 標籤。

-jQuery has a function called `.remove()` that will remove an HTML element entirely.
+jQuery 有一個名爲 `.remove()` 的函數，它將完全刪除一個 HTML 元素。

 用 `.remove()` 方法從頁面移除 `#target4` 元素。

@@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery

 每個 HTML 標籤都默認 `inherits`（繼承）其 `parent`（父標籤）的 CSS 屬性。

-For example, the `h3` element in your `jQuery Playground` has the parent element of `<div class="container-fluid">`, which itself has the parent element of `body`.
+例如，你的 `jQuery Playground` 中的 `h3` 標籤的父標籤是 `<div class="container-fluid">`，而這個標籤的父標籤是 `body`。

 jQuery 有一個 `parent()` 方法，可以訪問被選取標籤的父標籤。

@@ -20,7 +20,7 @@ dashedName: pass-an-array-as-props

 # --instructions--

-代碼編輯器中有 `List` 和 `ToDo` 組件。 在 `ToDo` 組件中渲染每個 `List` 時，傳入 `tasks` 屬性並將其分配給待辦任務數組，例如 `["walk dog", "workout"]`。 然後訪問 `List` 組件中的 `tasks` 數組，在`p`元素中顯示其值。 Use `join(", ")` to display the `props.tasks` array in the `p` element as a comma separated list. 今天的列表應該至少有 2 個任務，明天的列表應該至少有 3 個任務。
+代碼編輯器中有 `List` 和 `ToDo` 組件。 在 `ToDo` 組件中渲染每個 `List` 時，傳入 `tasks` 屬性並將其分配給待辦任務數組，例如 `["walk dog", "workout"]`。 然後訪問 `List` 組件中的 `tasks` 數組，在`p`元素中顯示其值。 使用 `join(", ")` 將 `props.tasks` 數組以逗號分隔列表的形式顯示在 `p` 元素中。 今天的列表應該至少有 2 個任務，明天的列表應該至少有 3 個任務。

 # --hints--

@@ -28,19 +28,19 @@ action creator `decAction` 應該返回一個 `type` 等於 `DECREMENT` 的 acti
 assert(decAction().type === DECREMENT);
 ```

-Running `store.getState()` should return a number
+運行 `store.getState()` 應該返回一個數字。

 ```js
 assert(typeof store.getState() === 'number');
 ```

-The Redux store should initialize with a `state` of 0.
+Redux store 應該將 `state` 初始化爲 0。

 ```js
 assert(_store.getState() === 0);
 ```

-Dispatching `incAction` on the Redux store should increment the `state` by 1.
+在 Redux store 上 dispatch `incAction` 應該將 `state` 增加 1。

 ```js
 assert(
@@ -53,7 +53,7 @@ assert(
 );
 ```

-Dispatching `decAction` on the Redux store should decrement the `state` by 1.
+在 Redux store 上 dispatch `decAction` 應該將 `state` 減少 1。

 ```js
 assert(
@@ -66,7 +66,7 @@ assert(
 );
 ```

-`counterReducer` should be a function
+`counterReducer` 應該是一個函數。

 ```js
 assert(typeof counterReducer === 'function');
@@ -44,7 +44,7 @@ $colors: (color1: blue, color2: red, color3: green);

 # --instructions--

-Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item to the respective color. Each class should set the `background-color` to the respective color as well.
+編寫一個 `@each` 指令遍歷列表：`blue, black, red` ，將每個變量分配給 class 爲 `.color-bg` 的項目，使每個項目的 `color` 部分都是各自相應的顏色。 每個 class 也應該將 `background-color` 設置爲相應的顏色。

 # --hints--

@@ -18,7 +18,7 @@ Sass 中的 `@if` 指令對於測試特定情況非常有用——它的工作
 }
 ```

-And just like in JavaScript, the `@else if` and `@else` directives test for more conditions:
+類似 JavaScript，`@else if` 和 `@else` 指令測試更多條件：

 ```scss
@mixin text-effect($val) {
@@ -39,7 +39,7 @@ And just like in JavaScript, the `@else if` and `@else` directives test for more

 # --instructions--

-創建一個名爲 `border-stroke` 的 mixin，它接受一個參數 `$val`。 The mixin should check for the following conditions using `@if`, `@else if`, and `@else` directives:
+創建一個名爲 `border-stroke` 的 mixin，它接受一個參數 `$val`。 mixin 應使用 `@if`、`@else if` 和 `@else` 指令檢查以下條件：

 ```scss
 light - 1px solid black
@@ -47,7 +47,7 @@ medium - 3px solid black
 heavy - 6px solid black
 ```

-If the `$val` parameter value is not `light`, `medium`, or `heavy`, then the `border` property should be set to `none`.
+如果 `$val` 參數值不是 `light`、`medium` 或者 `heavy`，`border` 屬性應該被設置爲 `none`。

 # --hints--

@@ -29,7 +29,7 @@ dashedName: introduction-to-data-analysis

 ---

-分析數據並得出結論。
+挑選一個期望的分析結論。

 ---

@@ -61,6 +61,12 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
 assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
 ```

+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
 # --seed--

 ## --seed-contents--
@@ -9,7 +9,7 @@ dashedName: build-a-data-graph-explorer

 你將使用 <a href="https://colab.research.google.com/#create=true" target="_blank" rel="noopener noreferrer nofollow">Google Colaboratory</a> 來完成這個項目。

-Once you complete the project, submit your project link below. 如果你提交的是 Google Colaboratory 的鏈接，請確保鏈接分享選項爲 “anyone with the link”。
+完成項目之後，請在下方提交你的項目鏈接。 如果你提交的是 Google Colaboratory 的鏈接，請確保鏈接分享選項爲 “anyone with the link”。

 # --instructions--

@@ -9,7 +9,7 @@ dashedName: build-three-math-games

 你將<a href="https://colab.research.google.com/#create=true" target="_blank" rel="noopener noreferrer nofollow">使用 Google Colaboratory 來完成這個項目</a>。

-Once you complete the project, submit your project link below. 如果你提交的是 Google Colaboratory 的鏈接，請確保鏈接分享選項爲 “anyone with the link”。
+完成項目之後，請在下方提交你的項目鏈接。 如果你提交的是 Google Colaboratory 的鏈接，請確保鏈接分享選項爲 “anyone with the link”。

 # --instructions--

@@ -1,10 +1,10 @@
 ---
 id: 647f7da207d29547b3bee1ba
-title: 'Foundational C# with Microsoft Certification'
+title: '基础 C# 和微软认证'
 certification: foundational-c-sharp-with-microsoft
 challengeType: 7
 isPrivate: true
 tests:
  - 
    id: 647e22d18acb466c97ccbef8
-    title: 'Foundational C# with Microsoft Certification Exam'
+    title: '基础 C# 和微软认证考试'
@@ -26,7 +26,7 @@ HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语

 # --instructions--

-是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面了。 Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。 To hear a clip of his screen reader in action, add an `audio` element after the `p` element. 具有 `controls` 属性。 Then place a `source` element inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.
+是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面了。 Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。 为了体验屏幕阅读器的朗读效果，请在 `p` 元素之后添加一个 `audio` 元素， 具有 `controls` 属性。 然后在 `audio` 标签里面放一个带有 `src` 属性的 `source` 标签，属性值为 `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`。将 `type` 属性设置为 `"audio/mpeg"`.

 **注意：** 音频片段的播放速度可能会快到令我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。

@@ -8,7 +8,7 @@ dashedName: iterate-through-the-keys-of-an-object-with-a-for---in-statement

 # --description--

-Sometimes you need to iterate through all the keys within an object. You can use a <dfn>for...in</dfn> loop to do this. The for...in loop looks like:
+有时候你需要遍历一个对象中的所有键。 你可以使用 <dfn>for...in</dfn> 循环来做这件事。 for...in 循环是这样的：

 ```javascript
 const refrigerator = {
@@ -21,15 +21,15 @@ for (const food in refrigerator) {
 }
 ```

-This code logs `milk 1`  and `eggs 12`, with each key-value pair on its own line.
+以上代码记录 `milk 1` 和 `eggs 12`，每个键值对单独为一行。

-We defined the variable `food` in the loop head and this variable was set to each of the object's keys on each iteration, resulting in each food's name being printed to the console.
+我们在循环头中定义了变量 `food` ，这个变量被设置为每次迭代上对象的每个键值，将每个食物的名称打印到控制台。

 **注意：**对象中的键是无序的，这与数组不同。 因此，一个对象中某个属性的位置，或者说它出现的相对顺序，在引用或访问该属性时是不确定的。

 # --instructions--

-We've defined a function `countOnline` which accepts one argument, `allUsers`. Use a <dfn>for...in</dfn> statement inside this function to loop through the `allUsers` object and return the number of users whose `online` property is set to `true`. An example of an object which could be passed to `countOnline` is shown below. Each user will have an `online` property set to either `true` or `false`.
+我们定义了一个函数 `countOnline`，它接收一个参数 `allUsers`。 在这个函数中使用 <dfn>for...in</dfn> 语句来遍历 `allUsers` 对象，并返回 `online` 属性为 `true` 的用户数量。 一个可以传递给 `countOnline` 的对象的例子显示如下。 每个用户都有 `online` 属性，其属性值为 `true` 或 `false`。

 ```js
 {
@@ -51,7 +51,7 @@ assert(gloveBoxContents === 'maps');
 assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
 ```

-`gloveBoxContents` should still be declared with `const`.
+应该用 `const` 声明 `gloveBoxContents`。

 ```js
 assert.match(code, /const\s+gloveBoxContents\s*=/)
@@ -9,25 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript

 # --description--

-You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
+你可以用 `Math.random()` 生成随机的小数，但有时你需要生成随机的整数。 下面的流程将给你一个小于 `20` 的随机整数：

-1. Use `Math.random()` to generate a random decimal number.
-2. Multiply that random decimal number by `20`.
-3. Use `Math.floor()` to round this number down to its nearest whole number.
+1. 用 `Math.random()` 生成一个随机小数。
+2. 把这个随机小数乘以 `20`。
+3. 用 `Math.floor()` 向下取整，获得它最近的整数。

-Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
+记住 `Math.random()` 永远不能完全返回 `1`，所以不可能实际得到 `20`，因为你正在用 `Math.floor()` 四舍五入。 这个流程将给你一个从 `0` 到 `19` 的随机整数。

-Putting everything together, this is what your code looks like:
+把操作连起来，代码类似于下面：

 ```js
 Math.floor(Math.random() * 20);
 ```

-You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
+你将调用 `Math.random()`，把结果乘以 20，然后把值传给 `Math.floor()`，向下取整获得最近的整数。

 # --instructions--

-Use this technique to generate and return a random whole number in the range from `0` to `9`.
+使用这个方法生成并返回 `0` 和 `9` 之间的随机整数。

 # --hints--

@@ -49,7 +49,7 @@ assert(
 assert(code.match(/Math.random/g).length >= 1);
 ```

-You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
+应该将 `Math.random` 的结果乘以 10，以生成 0 到 9 之间的随机数。

 ```js
 assert(
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range

 # --description--

-You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
+你可以在从零到给定数字的范围内生成随机整数。 你也可以为此范围选择一个不同的较小数字。

-You'll call your minimum number `min` and your maximum number `max`.
+你将把最小的数字定义为 `min`，把最大的数字定义为 `max`。

-This formula gives a random whole number in the range from `min` to `max`. 仔细看看并尝试理解这行代码到底在干嘛：
+这个公式将生成一个从 `min` 到 `max` 的随机整数。 仔细看看并尝试理解这行代码到底在干嘛：

 ```js
 Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min

 # --instructions--

-Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
+创建一个函数 `randomRange`，参数为 `myMin` 和 `myMax`，返回一个在 `myMin`（包括 myMin）和 `myMax`（包括 myMax）之间的随机整数。

 # --hints--

@@ -22,7 +22,7 @@ dashedName: record-collection
 -   你的函数必须始终返回整个 `records` 对象。
 -   如果 `value` 是空字符串，从专辑里删除指定的 `prop`。
 -   如果 `prop` 不是 `tracks`，并且 `value` 不是一个空字符串，将 `value` 赋给那个专辑的 `prop`。
-   If `prop` is `tracks` and `value` isn't an empty string, you need to update the album's `tracks` array. First, if the album does not have a `tracks` property, assign it an empty array. Then add the `value` as the last item in the album's `tracks` array.
+-   如果 `prop` 是 `tracks` 并且 `value` 不是一个空字符串，你需要更新专辑的 `tracks` 数组。 首先，如果专辑没有 `tracks` 属性，赋予它一个空数组。 然后添加 `value` 作为专辑的 `tracks` 数组的最后一个项目。

 **注意：** 将 `recordCollection` 对象的副本用于测试。 你不应该直接修改 `recordCollection` 对象。

@@ -8,7 +8,7 @@ dashedName: testing-objects-for-properties

 # --description--

-To check if a property on a given object exists or not, you can use the `.hasOwnProperty()` method. `someObject.hasOwnProperty(someProperty)` returns `true` or `false` depending on if the property is found on the object or not.
+要检查某个对象是否具有一个属性，你可以使用 `.hasOwnProperty()` 方法。 根据对象是否具有该属性，`someObject.hasOwnProperty(someProperty)` 返回 `true` 或 `false`。

 **示例**

@@ -21,11 +21,11 @@ checkForProperty({ top: 'hat', bottom: 'pants' }, 'top'); // true
 checkForProperty({ top: 'hat', bottom: 'pants' }, 'middle'); // false
 ```

-The first `checkForProperty` function call returns `true`, while the second returns `false`.
+第一个 `checkForProperty` 函数返回 `true`，第二个返回 `false`。

 # --instructions--

-Modify the function `checkObj` to test if the object passed to the function parameter `obj` contains the specific property passed to the function parameter `checkProp`. If the property passed to `checkProp` is found on `obj`, return that property's value. If not, return `Not Found`.
+修改函数 `checkObj` 以检查传给函数参数的对象 `obj` 是否包含传给函数参数的属性 `checkProp`。 如果在 `obj` 中找到传给 `checkProp` 的属性，则返回该属性的值。 如果没有，则返回 `Not Found`。

 # --hints--

@@ -65,7 +65,7 @@ assert.isFunction(Thermostat);
 assert.isFunction(Thermostat?.constructor);
 ```

-The `class` keyword should be used.
+应该使用 `class` 关键字。

 ```js
 assert.match(code, /class/);
@@ -28,13 +28,13 @@ const maximus = Math.max(...arr);

 `maximus` 的值应该是 `89`。

-`...arr` 返回一个解压的数组。 In other words, it spreads the array. 然而，展开操作符只能够在函数的参数中或者数组中使用。 For example:
+`...arr` 返回一个解压缩的数组。 换句话说，它展开了数组。 然而，展开操作符只能够在函数的参数中或者数组中使用。 例如：

 ```js
 const spreaded = [...arr];
 ```

-However, the following code will not work:
+下面的代码将不能运行：

 ```js
 const spreaded = ...arr;
@@ -42,23 +42,23 @@ const spreaded = ...arr;

 # --instructions--

-Copy all contents of `arr1` into another array `arr2` using the spread operator.
+使用展开操作符将 `arr1` 中的全部内容复制到另一个数组 `arr2` 中。

 # --hints--

-`arr2` should be correct copy of `arr1`.
+`arr2` 应该是从 `arr1` 复制而来。

 ```js
 assert(arr2.every((v, i) => v === arr1[i]) && arr2.length);
 ```

-`...` spread operator should be used to duplicate `arr1`.
+应使用展开操作符 `...` 来复制 `arr1`。

 ```js
 assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
 ```

-`arr2` should remain unchanged when `arr1` is changed.
+当 `arr1` 改变的时候，`arr2` 应保持不变。

 ```js
 assert((arr1, arr2) => {
@@ -36,43 +36,43 @@ assert.deepEqual(addTogether(2, 3), 5);
 assert.deepEqual(addTogether(23, 30), 53);
 ```

-`addTogether("2", 3)` should return `undefined`.
+`addTogether("2", 3)` 应返回 `undefined`。

 ```js
 assert.isUndefined(addTogether('2', 3));
 ```

-`addTogether(5, undefined)` should return `undefined`.
+`addTogether(5, undefined)` 应返回 `undefined`。

 ```js
 assert.isUndefined(addTogether(5, undefined));
 ```

-`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` should return `undefined`.
+`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` 应返回 `undefined`。

 ```js
 assert.isUndefined(addTogether('https://www.youtube.com/watch?v=dQw4w9WgXcQ'));
 ```

-`addTogether(5)` should return a function.
+`addTogether(5)` 应返回一个函数。

 ```js
 assert.deepEqual(typeof(addTogether(5)), 'function');
 ```

-`addTogether(5)(7)` should return 12.
+`addTogether(5)(7)` 应返回 12。

 ```js
 assert.deepEqual(addTogether(5)(7), 12);
 ```

-`addTogether(2)([3])` should return `undefined`.
+`addTogether(2)([3])` 应返回 `undefined`。

 ```js
 assert.isUndefined(addTogether(2)([3]));
 ```

-`addTogether(2, "3")` should return `undefined`.
+`addTogether(2, "3")` 应返回 `undefined`。

 ```js
 assert.isUndefined(addTogether(2, '3'));
@@ -18,7 +18,7 @@ Font Awesome 是一个非常便利的图标库。 这些图标可以是网络字

 为 info 按钮添加 Font Awesome `info-circle` 图标，delete 按钮添加 `trash` 图标。

-**Note:** You can use either `i` or `span` elements to complete this challenge.
+**注意：** 你可以使用 `i` 或 `span` 元素来完成此挑战。

 # --hints--

@@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery

 现在学习用 jQuery 从页面移除 HTML 标签。

-jQuery has a function called `.remove()` that will remove an HTML element entirely.
+jQuery 有一个名为 `.remove()` 的函数，它将完全删除一个 HTML 元素。

 用 `.remove()` 方法从页面移除 `#target4` 元素。

@@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery

 每个 HTML 标签都默认 `inherits`（继承）其 `parent`（父标签）的 CSS 属性。

-For example, the `h3` element in your `jQuery Playground` has the parent element of `<div class="container-fluid">`, which itself has the parent element of `body`.
+例如，你的 `jQuery Playground` 中的 `h3` 标签的父标签是 `<div class="container-fluid">`，而这个标签的父标签是 `body`。

 jQuery 有一个 `parent()` 方法，可以访问被选取标签的父标签。

@@ -20,7 +20,7 @@ dashedName: pass-an-array-as-props

 # --instructions--

-代码编辑器中有 `List` 和 `ToDo` 组件。 在 `ToDo` 组件中渲染每个 `List` 时，传入 `tasks` 属性并将其分配给待办任务数组，例如 `["walk dog", "workout"]`。 然后访问 `List` 组件中的 `tasks` 数组，在`p`元素中显示其值。 Use `join(", ")` to display the `props.tasks` array in the `p` element as a comma separated list. 今天的列表应该至少有 2 个任务，明天的列表应该至少有 3 个任务。
+代码编辑器中有 `List` 和 `ToDo` 组件。 在 `ToDo` 组件中渲染每个 `List` 时，传入 `tasks` 属性并将其分配给待办任务数组，例如 `["walk dog", "workout"]`。 然后访问 `List` 组件中的 `tasks` 数组，在`p`元素中显示其值。 使用 `join(", ")` 将 `props.tasks` 数组以逗号分隔列表的形式显示在 `p` 元素中。 今天的列表应该至少有 2 个任务，明天的列表应该至少有 3 个任务。

 # --hints--

@@ -28,19 +28,19 @@ action creator `decAction` 应该返回一个 `type` 等于 `DECREMENT` 的 acti
 assert(decAction().type === DECREMENT);
 ```

-Running `store.getState()` should return a number
+运行 `store.getState()` 应该返回一个数字。

 ```js
 assert(typeof store.getState() === 'number');
 ```

-The Redux store should initialize with a `state` of 0.
+Redux store 应该将 `state` 初始化为 0。

 ```js
 assert(_store.getState() === 0);
 ```

-Dispatching `incAction` on the Redux store should increment the `state` by 1.
+在 Redux store 上 dispatch `incAction` 应该将 `state` 增加 1。

 ```js
 assert(
@@ -53,7 +53,7 @@ assert(
 );
 ```

-Dispatching `decAction` on the Redux store should decrement the `state` by 1.
+在 Redux store 上 dispatch `decAction` 应该将 `state` 减少 1。

 ```js
 assert(
@@ -66,7 +66,7 @@ assert(
 );
 ```

-`counterReducer` should be a function
+`counterReducer` 应该是一个函数。

 ```js
 assert(typeof counterReducer === 'function');
@@ -44,7 +44,7 @@ $colors: (color1: blue, color2: red, color3: green);

 # --instructions--

-Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item to the respective color. Each class should set the `background-color` to the respective color as well.
+编写一个 `@each` 指令遍历列表：`blue, black, red` ，将每个变量分配给 class 为 `.color-bg` 的项目，使每个项目的 `color` 部分都是各自相应的颜色。 每个 class 也应该将 `background-color` 设置为相应的颜色。

 # --hints--

@@ -18,7 +18,7 @@ Sass 中的 `@if` 指令对于测试特定情况非常有用——它的工作
 }
 ```

-And just like in JavaScript, the `@else if` and `@else` directives test for more conditions:
+类似 JavaScript，`@else if` 和 `@else` 指令测试更多条件：

 ```scss
@mixin text-effect($val) {
@@ -39,7 +39,7 @@ And just like in JavaScript, the `@else if` and `@else` directives test for more

 # --instructions--

-创建一个名为 `border-stroke` 的 mixin，它接受一个参数 `$val`。 The mixin should check for the following conditions using `@if`, `@else if`, and `@else` directives:
+创建一个名为 `border-stroke` 的 mixin，它接受一个参数 `$val`。 mixin 应使用 `@if`、`@else if` 和 `@else` 指令检查以下条件：

 ```scss
 light - 1px solid black
@@ -47,7 +47,7 @@ medium - 3px solid black
 heavy - 6px solid black
 ```

-If the `$val` parameter value is not `light`, `medium`, or `heavy`, then the `border` property should be set to `none`.
+如果 `$val` 参数值不是 `light`、`medium` 或者 `heavy`，`border` 属性应该被设置为 `none`。

 # --hints--

@@ -29,7 +29,7 @@ dashedName: introduction-to-data-analysis

 ---

-分析数据并得出结论。
+挑选一个期望的分析结论。

 ---

@@ -61,6 +61,12 @@ assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelect
 assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
 ```

+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
 # --seed--

 ## --seed-contents--
@@ -9,7 +9,7 @@ dashedName: build-a-data-graph-explorer

 你将使用 <a href="https://colab.research.google.com/#create=true" target="_blank" rel="noopener noreferrer nofollow">Google Colaboratory</a> 来完成这个项目。

-Once you complete the project, submit your project link below. 如果你提交的是 Google Colaboratory 的链接，请确保链接分享选项为 “anyone with the link”。
+完成项目之后，请在下方提交你的项目链接。 如果你提交的是 Google Colaboratory 的链接，请确保链接分享选项为 “anyone with the link”。

 # --instructions--

@@ -9,7 +9,7 @@ dashedName: build-three-math-games

 你将<a href="https://colab.research.google.com/#create=true" target="_blank" rel="noopener noreferrer nofollow">使用 Google Colaboratory 来完成这个项目</a>。

-Once you complete the project, submit your project link below. 如果你提交的是 Google Colaboratory 的链接，请确保链接分享选项为 “anyone with the link”。
+完成项目之后，请在下方提交你的项目链接。 如果你提交的是 Google Colaboratory 的链接，请确保链接分享选项为 “anyone with the link”。

 # --instructions--

@@ -61,6 +61,12 @@ Tu tercer elemento `td` debe tener el texto `$809`.
 assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
 ```

+Your third `td` element should have the `class` attribute set to `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
 # --seed--

 ## --seed-contents--
@@ -8,7 +8,7 @@ dashedName: iterate-through-the-keys-of-an-object-with-a-for---in-statement

 # --description--

-Sometimes you need to iterate through all the keys within an object. You can use a <dfn>for...in</dfn> loop to do this. The for...in loop looks like:
+Manchmal musst du alle Schlüssel innerhalb eines Objekts durchlaufen. Du kannst dazu eine <dfn>for...in</dfn>-Schleife verwenden. Die for...in-Schleife sieht wie folgt aus:

 ```javascript
 const refrigerator = {
@@ -21,7 +21,7 @@ for (const food in refrigerator) {
 }
 ```

-This code logs `milk 1`  and `eggs 12`, with each key-value pair on its own line.
+Dieser Code protokolliert `milk 1`  und `eggs 12`, wobei jeder Schlüssel-Wert-Paar in einer eigenen Zeile steht.

 We defined the variable `food` in the loop head and this variable was set to each of the object's keys on each iteration, resulting in each food's name being printed to the console.

@@ -29,7 +29,7 @@ We defined the variable `food` in the loop head and this variable was set to eac

 # --instructions--

-We've defined a function `countOnline` which accepts one argument, `allUsers`. Use a <dfn>for...in</dfn> statement inside this function to loop through the `allUsers` object and return the number of users whose `online` property is set to `true`. An example of an object which could be passed to `countOnline` is shown below. Each user will have an `online` property set to either `true` or `false`.
+Wir haben eine Funktion `countOnline` definiert, die ein Argument (ein Nutzer-Objekt) `allUsers` akzeptiert. Use a <dfn>for...in</dfn> statement inside this function to loop through the `allUsers` object and return the number of users whose `online` property is set to `true`. Ein Beispiel für ein Objekt, das an `countOnline` übergeben werden könnte, ist unten abgebildet. Jeder Nutzer wird eine `online`-Eigenschaft mit entweder einem `true` oder `false`-Wert besitzen.

 ```js
 {
@@ -51,7 +51,7 @@ Dein Code sollte die Punkt- und Klammerschreibweise verwenden, um auf `myStorage
 assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
 ```

-`gloveBoxContents` should still be declared with `const`.
+`gloveBoxContents` sollte mit `const` deklariert werden.

 ```js
 assert.match(code, /const\s+gloveBoxContents\s*=/)
@@ -11,7 +11,7 @@ dashedName: comparisons-with-the-logical-and-operator

 Manchmal musst du mehr als eine Sache auf einmal testen. Der <dfn>logische Und</dfn>-Operator (`&&`) gibt `true` zurück, wenn und nur wenn die <dfn>Operanden</dfn> links und rechts von ihm wahr sind.

-The same effect could be achieved by nesting an `if` statement inside another `if`.
+Den gleichen Effekt kannst du erzielen, indem du eine `if`-Anweisung in eine andere `if`-Anweisung verschachtelst.

 ```js
 if (num > 5) {
@@ -22,7 +22,7 @@ if (num > 5) {
 return "No";
 ```

-This code will return `Yes` if `num` is greater than `5` and less than `10`. The same logic can be written with the <dfn>logical and</dfn> operator.
+Dieser Code gibt `Yes` zurück, wenn `num` größer als `5` und kleiner als `10` ist. Die gleiche Logik kann mit dem Operator <dfn>logical and</dfn> geschrieben werden.

 ```js
 if (num > 5 && num < 10) {
@@ -25,7 +25,7 @@ if (num < 5) {
 return "Yes";
 ```

-This code will return `Yes` if `num` is between `5` and `10` (`5` and `10` included). The same logic can be written with the <dfn>logical or</dfn> operator.
+Dieser Code wird `Yes` zurückgeben, wenn `num` zwischen `5` und `10` liegt (einschließlich `5` und `10`). Die gleiche Logik kann mit dem Operator <dfn>logical and</dfn> geschrieben werden.

 ```js
 if (num > 10 || num < 5) {
@@ -11,13 +11,13 @@ dashedName: escape-sequences-in-strings

 Anführungszeichen sind nicht die einzigen Zeichen, die innerhalb eines Strings <dfn>ausgelassen</dfn> werden können. Escape-Sequenzen ermöglichen es dir, Zeichen zu verwenden, die du sonst nicht in einem String verwenden könntest.

-<table class='table table-striped'><thead><tr><th>Code</th><th>Ausgabe</th></tr></thead><tbody><tr><td><code>\'</code></td><td>Einzelnes Anführungszeichen</td></tr><tr><td><code>\"</code></td><td>Doppeltes Anführungszeichen</td></tr><tr><td><code>\\</code></td><td>Backslash</td></tr><tr><td><code>\n</code></td><td>Zeilenumbruch</td></tr><tr><td><code>\t</code></td><td>Tabulator</td></tr><tr><td><code>\r</code></td><td>Wagenrücklauf (Carriage Return)</td></tr><tr><td><code>\b</code></td><td>backspace</td></tr><tr><td><code>\f</code></td><td>Seitenvorschub (Formfeed)</td></tr></tbody></table>
+<table class='table table-striped'><thead><tr><th>Code</th><th>Ausgabe</th></tr></thead><tbody><tr><td><code>\'</code></td><td>Einzelnes Anführungszeichen</td></tr><tr><td><code>\"</code></td><td>Doppeltes Anführungszeichen</td></tr><tr><td><code>\\</code></td><td>Backslash</td></tr><tr><td><code>\n</code></td><td>Zeilenumbruch</td></tr><tr><td><code>\t</code></td><td>Tabulator</td></tr><tr><td><code>\r</code></td><td>Wagenrücklauf (Carriage Return)</td></tr><tr><td><code>\b</code></td><td>Backspace</td></tr><tr><td><code>\f</code></td><td>Seitenvorschub (Formfeed)</td></tr></tbody></table>

-*Note that the backslash itself must be escaped in order to display as a backslash.*
+*Bitte beachte, dass das Backslash selbst mit einem Escape-Zeichen versehen werden muss, um als Backslash angezeigt zu werden.*

 # --instructions--

-Assign the following three lines of text into the single variable `myStr` using escape sequences.
+Weise die folgenden drei Textzeilen der einzelnen Variablen `myStr` mit Hilfe von Escape-Sequenzen zu.

 <pre>
 FirstLine
@@ -37,7 +37,7 @@ Um Sonderzeichen korrekt einzufügen, musst du Escape-Sequenzen verwenden. Du mu
 assert(!/ /.test(myStr));
 ```

-`myStr` should contain the strings `FirstLine`, `SecondLine` and `ThirdLine` (remember case sensitivity)
+`myStr` sollte die Strings `FirstLine`, `SecondLine` und `ThirdLine` enthalten (Groß- und Kleinschreibung beachten)

 ```js
 assert(
@@ -45,25 +45,25 @@ assert(
 );
 ```

-`FirstLine` should be followed by the newline character `\n`
+`FirstLine` sollte von einem Zeilenumbruchzeichen `\n` gefolgt werden

 ```js
 assert(/FirstLine\n/.test(myStr));
 ```

-`myStr` should contain a tab character `\t` which follows a newline character
+`myStr` sollte ein Tab-Zeichen `\t` enthalten, das auf ein Zeilenumbruchzeichen folgt

 ```js
 assert(/\n\t/.test(myStr));
 ```

-`SecondLine` should be preceded by the backslash character `\`
+`SecondLine` sollte das Backslash-Zeichen `\` vorangestellt werden

 ```js
 assert(/\\SecondLine/.test(myStr));
 ```

-There should be a newline character between `SecondLine` and `ThirdLine`
+Zwischen `SecondLine` und `ThirdLine` sollte ein Zeilenumbruch stehen

 ```js
 assert(/SecondLine\nThirdLine/.test(myStr));
@@ -9,25 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript

 # --description--

-You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
+Du kannst zufällige Dezimalzahlen mit `Math.random()` erzeugen, aber manchmal musst du zufällige ganze Zahlen erzeugen. Mit dem folgenden Verfahren erhälst du eine zufällige ganze Zahl, die kleiner als `20` ist:

-1. Use `Math.random()` to generate a random decimal number.
-2. Multiply that random decimal number by `20`.
-3. Use `Math.floor()` to round this number down to its nearest whole number.
+1. Verwende `Math.random()`, um eine zufällige Dezimalzahl zu erzeugen.
+2. Multipliziere diese zufällige Dezimalzahl mit `20`.
+3. Nutze `Math.floor()`, um auf die ganze Zahl abzurunden.

-Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
+Denke daran, dass `Math.random()` nie genau eine `1` zurückgeben kann. Es ist also unmöglich, tatsächlich `20` zu erhalten, da du mit `Math.floor()` abrundest. Mit diesem Verfahren erhältst du eine zufällige ganze Zahl im Bereich von `0` bis `19`.

-Putting everything together, this is what your code looks like:
+Alles zusammengenommen sieht dein Code folgendermaßen aus:

 ```js
 Math.floor(Math.random() * 20);
 ```

-You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
+Du rufst `Math.random()` auf, multiplizierst das Ergebnis mit 20 und übergibst den Wert dann an `Math.floor()`, um den Wert auf die nächste ganze Zahl abzurunden.

 # --instructions--

-Use this technique to generate and return a random whole number in the range from `0` to `9`.
+Verwende diese Technik, um eine zufällige ganze Zahl im Bereich von `0` bis `9` zu erzeugen und zurückzugeben.

 # --hints--

@@ -49,7 +49,7 @@ Du solltest `Math.random` verwenden, um eine Zufallszahl zu erzeugen.
 assert(code.match(/Math.random/g).length >= 1);
 ```

-You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
+Du solltest das Ergebnis von `Math.random` mit 10 multiplizieren, damit es eine Zahl im Bereich von null bis neun ergibt.

 ```js
 assert(
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range

 # --description--

-You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
+Du kannst eine zufällige ganze Zahl im Bereich von Null bis zu einer bestimmten Zahl generieren. Du kannst auch eine andere niedrigere Zahl für diesen Bereich wählen.

-You'll call your minimum number `min` and your maximum number `max`.
+Du nennst deine niedrigste Zahl `min` und deine höchste Zahl `max`.

-This formula gives a random whole number in the range from `min` to `max`. Nimm dir einen Moment Zeit, um ihn zu lesen und zu verstehen, was dieser Code macht:
+Diese Formel gibt eine ganze Zahl im Bereich von `min` bis `max` an. Nimm dir einen Moment Zeit, um ihn zu lesen und zu verstehen, was dieser Code macht:

 ```js
 Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min

 # --instructions--

-Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
+Erstelle eine Funktion namens `randomRange`, die einen Bereich `myMin` und `myMax` verwendet und eine zufällige ganze Zahl zurückgibt, die größer oder gleich `myMin` und kleiner oder gleich `myMax` ist.

 # --hints--

@@ -8,27 +8,27 @@ dashedName: record-collection

 # --description--

-You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
+Du wirst eine Funktion erstellen, die bei der Verwaltung einer Musikalbensammlung helfen wird. Die Sammlung ist als ein Objekt organisiert, das mehrere Alben enthält, die ebenfalls Objekte darstellen. Jedes Album wird in der Sammlung mit einer einzigartigen `id` als Eigenschaftsname dargestellt. Innerhalb jedes Albumobjekts befinden sich verschiedene Eigenschaften, die Informationen über das Album enthalten. Nicht alle Alben enthalten vollständige Informationen.

-The `updateRecords` function takes 4 arguments represented by the following function parameters:
+Die `updateRecords`-Funktion erwartet 4 Argumente, die durch die folgenden Funktionsparameter repräsentiert werden:

-   `records` - an object containing several individual albums
-   `id` - a number representing a specific album in the `records` object
-   `prop` - a string representing the name of the album’s property to update
-   `value` - a string containing the information used to update the album’s property
+-   `records` - ein Objekt mit mehreren einzelnen Alben
+-   `id` - eine Zahl, die ein bestimmtes Album im `records`-Objekt repräsentiert
+-   `prop` - ein String, der den Namen der zu aktualisierenden Eigenschaft des Albums angibt
+-   `value` - ein String, der die Informationen enthält, die zur Aktualisierung der Album-Eigenschaft verwendet werden

-Complete the function using the rules below to modify the object passed to the function.
+Vervollständige die Funktion mit Hilfe der folgenden Regeln, um das an die Funktion übergebene Objekt zu verändern.

-   Your function must always return the entire `records` object.
-   If `value` is an empty string, delete the given `prop` property from the album.
-   If `prop` isn't `tracks` and `value` isn't an empty string, assign the `value` to that album's `prop`.
-   If `prop` is `tracks` and `value` isn't an empty string, you need to update the album's `tracks` array. First, if the album does not have a `tracks` property, assign it an empty array. Then add the `value` as the last item in the album's `tracks` array.
+-   Deine Funktion muss immer das gesamte `records`-Objekt zurückgeben.
+-   Falls `value` einen leeren String darstellt, lösche die angegebene `prop`-Eigenschaft aus dem Album.
+-   Falls `prop` nicht `tracks` darstellt und `value` kein leerer String ist, dann weise `value` dem `prop` des jeweiligen Albums zu.
+-   Wenn `prop` `tracks` ist und `value` keinen leeren String darstellt, dann musst du das `tracks`-Array des Albums aktualisieren. Wenn das Album keine `tracks`-Eigenschaft hat, dann weise ihm ein leeres Array zu. Füge dann den `value` als letzten Eintrag im `tracks`-Array des Albums hinzu.

-**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
+**Hinweis:** Für die Tests wird eine Kopie des Objekts `recordCollection` verwendet. Du solltest das Objekt `recordCollection` nicht direkt anpassen.

 # --hints--

-After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
+Nachdem `updateRecords(recordCollection, 5439, "artist", "ABBA")` ausgeführt wurde, sollte `artist` den String `ABBA` darstellen

 ```js
 assert(
@@ -37,7 +37,7 @@ assert(
 );
 ```

-After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
+Nachdem `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")` ausgeführt wurde, sollte `tracks` den String `Take a Chance on Me` als letztes und einziges Element enthalten.

 ```js
 assert(
@@ -47,14 +47,14 @@ assert(
 );
 ```

-After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
+Nachdem `updateRecords(recordCollection, 2548, "artist", "")` ausgeführt wurde, sollte kein Wert für `artist` eingestellt sein

 ```js
 updateRecords(_recordCollection, 2548, 'artist', '');
 assert(!_recordCollection[2548].hasOwnProperty('artist'));
 ```

-After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
+Nachdem `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")` ausgeführt wurde, sollte `tracks` den String `Addicted to Love` als letztes Element enthalten.

 ```js
 assert(
@@ -64,7 +64,7 @@ assert(
 );
 ```

-After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
+Nachdem `updateRecords(recordCollection, 2468, "tracks", "Free")` ausgeführt wurde, sollte `tracks` den String `1999` als erstes Element enthalten.

 ```js
 assert(
@@ -74,14 +74,14 @@ assert(
 );
 ```

-After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
+Nachdem `updateRecords(recordCollection, 2548, "tracks", "")` ausgeführt wurde, sollte kein Wert für `tracks` eingestellt sein

 ```js
 updateRecords(_recordCollection, 2548, 'tracks', '');
 assert(!_recordCollection[2548].hasOwnProperty('tracks'));
 ```

-After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
+Nachdem `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")` ausgeführt wurde, sollte `albumTitle` den String `Riptide` darstellen

 ```js
 assert(
@@ -9,7 +9,7 @@ dashedName: selecting-from-many-options-with-switch-statements

 # --description--

-If you need to match one value against many options, you can use a <dfn>switch</dfn> statement. A `switch` statement compares the value to the <dfn>case</dfn> statements which define various possible values. Any valid JavaScript statements can be executed inside a <dfn>case</dfn> block and will run from the first matched `case` value until a `break` is encountered.
+If you need to match one value against many options, you can use a <dfn>switch</dfn> statement. Eine `switch`-Anweisung vergleich den Wert einen mit der <dfn>case</dfn>-Anweisungen, in denen verschiedene mögliche Werte definiert werden. Any valid JavaScript statements can be executed inside a <dfn>case</dfn> block and will run from the first matched `case` value until a `break` is encountered.

 Hier ist ein Beispiel für eine `switch`-Anweisung:

@@ -8,7 +8,7 @@ dashedName: testing-objects-for-properties

 # --description--

-To check if a property on a given object exists or not, you can use the `.hasOwnProperty()` method. `someObject.hasOwnProperty(someProperty)` returns `true` or `false` depending on if the property is found on the object or not.
+To check if a property on a given object exists or not, you can use the `.hasOwnProperty()` method. `someObject.hasOwnProperty(someProperty)` gibt `true` oder `false` zurück, je nachdem, ob die Eigenschaft auf dem Objekt gefunden wird oder nicht.

 **Beispiel**

@@ -21,11 +21,11 @@ checkForProperty({ top: 'hat', bottom: 'pants' }, 'top'); // true
 checkForProperty({ top: 'hat', bottom: 'pants' }, 'middle'); // false
 ```

-The first `checkForProperty` function call returns `true`, while the second returns `false`.
+Der erste `checkForProperty`-Funktionsaufruf gibt `true` zurück, während der zweite `false` zurückgibt.

 # --instructions--

-Modify the function `checkObj` to test if the object passed to the function parameter `obj` contains the specific property passed to the function parameter `checkProp`. If the property passed to `checkProp` is found on `obj`, return that property's value. If not, return `Not Found`.
+Modify the function `checkObj` to test if the object passed to the function parameter `obj` contains the specific property passed to the function parameter `checkProp`. If the property passed to `checkProp` is found on `obj`, return that property's value. Wenn nicht, wird `Not Found` zurückgegeben.

 # --hints--

@@ -45,7 +45,7 @@ Es ist zu beachten, dass das `class`-Schlüsselwort eine neue Funktion deklarier

 **Beachte:** UpperCamelCase sollte per Konvention für ES6-Klassennamen verwendet werden, wie in `SpaceShuttle` oben verwendet.

-Die `constructor`-Methode ist eine spezielle Methode zur Erstellung und Initialisierung eines Objekts, das mit einer Klasse erstellt wurde. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.
+Die `constructor`-Methode ist eine spezielle Methode zur Erstellung und Initialisierung eines Objekts, das mit einer Klasse erstellt wurde. Mehr darüber erfährst du im Abschnitt Objektorientierte Programmierung der JavaScript Algorithmen und Datenstrukturen Zertifizierung.

 # --instructions--

@@ -65,7 +65,7 @@ assert.isFunction(Thermostat);
 assert.isFunction(Thermostat?.constructor);
 ```

-The `class` keyword should be used.
+Das Schlüsselwort `class` sollte verwendet werden.

 ```js
 assert.match(code, /class/);
@@ -28,13 +28,13 @@ const maximus = Math.max(...arr);

 `maximus` hätte dann einen Wert von `89`.

-`...arr` gibt ein ungepacktes Array zurück. In other words, it spreads the array. Der Spread-Operator funktioniert jedoch nur an Ort und Stelle, z. B. in einem Argument einer Funktion oder in einem Array-Literal. For example:
+`...arr` gibt ein ungepacktes Array zurück. Mit anderen Worten: Es verteilt das Array. Der Spread-Operator funktioniert jedoch nur an Ort und Stelle, z. B. in einem Argument einer Funktion oder in einem Array-Literal. Zum Beispiel:

 ```js
 const spreaded = [...arr];
 ```

-However, the following code will not work:
+Der folgende Code funktioniert jedoch nicht:

 ```js
 const spreaded = ...arr;
@@ -42,23 +42,23 @@ const spreaded = ...arr;

 # --instructions--

-Copy all contents of `arr1` into another array `arr2` using the spread operator.
+Kopiere alle Inhalte von `arr1` in ein anderes Array `arr2`, indem du den Spread-Operator benutzt.

 # --hints--

-`arr2` should be correct copy of `arr1`.
+`arr2` sollte die korrekte Kopie von `arr1` sein.

 ```js
 assert(arr2.every((v, i) => v === arr1[i]) && arr2.length);
 ```

-`...` spread operator should be used to duplicate `arr1`.
+Der Spread-Operator `...` sollte zum Duplizieren von `arr1` verwendet werden.

 ```js
 assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
 ```

-`arr2` should remain unchanged when `arr1` is changed.
+`arr2` sollte unverändert bleiben, wenn `arr1` geändert wird.

 ```js
 assert((arr1, arr2) => {
@@ -36,43 +36,43 @@ assert.deepEqual(addTogether(2, 3), 5);
 assert.deepEqual(addTogether(23, 30), 53);
 ```

-`addTogether("2", 3)` should return `undefined`.
+`addTogether("2", 3)` sollte `undefined` zurückgeben.

 ```js
 assert.isUndefined(addTogether('2', 3));
 ```

-`addTogether(5, undefined)` should return `undefined`.
+`addTogether(5, undefined)` sollte `undefined` zurückgeben.

 ```js
 assert.isUndefined(addTogether(5, undefined));
 ```

-`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` should return `undefined`.
+`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` sollte `undefined` zurückgeben.

 ```js
 assert.isUndefined(addTogether('https://www.youtube.com/watch?v=dQw4w9WgXcQ'));
 ```

-`addTogether(5)` should return a function.
+`addTogether(5)` sollte eine Funktion zurückgeben.

 ```js
 assert.deepEqual(typeof(addTogether(5)), 'function');
 ```

-`addTogether(5)(7)` should return 12.
+`addTogether(5)(7)` sollte 12 zurückgeben.

 ```js
 assert.deepEqual(addTogether(5)(7), 12);
 ```

-`addTogether(2)([3])` should return `undefined`.
+`addTogether(2)([3])` sollte `undefined` zurückgeben.

 ```js
 assert.isUndefined(addTogether(2)([3]));
 ```

-`addTogether(2, "3")` should return `undefined`.
+`addTogether(2, "3")` sollte `undefined` zurückgeben.

 ```js
 assert.isUndefined(addTogether(2, '3'));
@@ -18,7 +18,7 @@ Font Awesome ist eine komfortable Bibliothek für Icons. Diese Icons können Web

 Benutze Font Awesome um ein `info-circle`-Icon zu deinem Informationsbutton hinzuzufügen und ein `trash`-Icon zu deinem Lösch-Button.

-**Note:** You can use either `i` or `span` elements to complete this challenge.
+**Hinweis:** Du kannst entweder `i` oder `span`-Elemente verwenden, um diese Aufgabe zu lösen.

 # --hints--

@@ -42,7 +42,7 @@ Hier sind einige Beispiele, die du für deine Schlagzeug-Maschine verwenden kann

 Du kannst dein Projekt erstellen, indem du diese CodePen-Vorlage <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow"></a> verwendest und auf `Save` klickst, um deinen eigenen Pen zu erstellen. Oder du kannst diesen CDN-Link verwenden, um die Tests in jeder beliebigen Umgebung auszuführen: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

-Once you're done, submit the URL to your working project with all its tests passing.
+Sobald du fertig bist, übermittle die URL an dein Arbeitsprojekt, wenn alle Tests bestanden sind.

 # --solutions--

@@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery

 Jedes HTML-Element hat ein Eltern(`parent`)-element, von dem es Eigenschaften erbt (`inherits`).

-For example, the `h3` element in your `jQuery Playground` has the parent element of `<div class="container-fluid">`, which itself has the parent element of `body`.
+Zum Beispiel enthält das `h3`-Element in deinem `jQuery Playground` das Elternelement von `<div class="container-fluid">`, das wiederum das Elternelement von `body` enthält.

 jQuery hat eine Funktion namens `parent()`, mit der du auf das Elternelement des von dir ausgewählten Elements zugreifen kannst.

@@ -18,7 +18,7 @@ Die `@if`-Direktive in Sass ist nützlich, um auf einen bestimmten Fall zu teste
 }
 ```

-And just like in JavaScript, the `@else if` and `@else` directives test for more conditions:
+Und genau wie in JavaScript testen die `@else if`- and `@else`-Anweisungen weitere Bedingungen:

 ```scss
@mixin text-effect($val) {
@@ -39,7 +39,7 @@ And just like in JavaScript, the `@else if` and `@else` directives test for more

 # --instructions--

-Erstelle ein Mixin namens `border-stroke`, das einen Parameter `$val` erhält. The mixin should check for the following conditions using `@if`, `@else if`, and `@else` directives:
+Erstelle ein Mixin namens `border-stroke`, das einen Parameter `$val` erhält. Das Mixin sollte mithilfe von `@if`-, `@else if`- und `@else`-Anweisungen die folgenden Bedingungen überprüfen:

 ```scss
 light - 1px solid black
@@ -47,7 +47,7 @@ medium - 3px solid black
 heavy - 6px solid black
 ```

-If the `$val` parameter value is not `light`, `medium`, or `heavy`, then the `border` property should be set to `none`.
+Falls der `$val`-Parameterwert nicht `light`, `medium` oder `heavy` ist, dann sollte die `border`-Eigenschaft auf `none` gesetzt werden.

 # --hints--

@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-bar-chart

 Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil.

-Du kannst HTML, Javascript, CSS und die D3-SVG-basierte Visualisierungs-Bibliothek verwenden. Zur Erfüllung der Testfälle müssen die Achsen mit der D3-Achseneigenschaft erzeugt werden, welche automatisch Achsenmarkierungen entlang der Achse erstellt. Diese Achsenmarkierungen sind notwendig, um die D3-Tests zu erfüllen, da diese zur Bestimmung der Ausrichtung von grafischen Elementen verwendet werden. Weiter Informationen über die Achsenerstellung findest du hier: <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. Falls du ein Frontend-Framework (wie z.B. Vue) verwendest, kann es passieren, dass die Testergebnisse für dynamische Inhalte ungenau sind. Wir hoffen, dass wir diese irgendwann berücksichtigen können, aber derzeit werden diese Frameworks nicht für D3-Projekte unterstützt.
+Du kannst HTML, Javascript, CSS und die D3-SVG-basierte Visualisierungs-Bibliothek verwenden. Zur Erfüllung der Testfälle müssen die Achsen mit der D3-Achseneigenschaft erzeugt werden, welche automatisch Achsenmarkierungen entlang der Achse erstellt. Diese Achsenmarkierungen sind notwendig, um die D3-Tests zu erfüllen, da diese zur Bestimmung der Ausrichtung von grafischen Elementen verwendet werden. Weiter Informationen über die Achsenerstellung findest du hier: <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Erforderliche DOM-Elemente werden zum Zeitpunkt eines jeden Tests abgefragt. Falls du ein Frontend-Framework (wie z.B. Vue) verwendest, kann es passieren, dass die Testergebnisse für dynamische Inhalte ungenau sind. Wir hoffen, dass wir diese irgendwann berücksichtigen können, aber derzeit werden diese Frameworks nicht für D3-Projekte unterstützt.

 **User Story #1:** Mein Diagramm sollte einen Titel mit einer passenden `id="title"` haben.

@@ -24,17 +24,17 @@ Du kannst HTML, Javascript, CSS und die D3-SVG-basierte Visualisierungs-Biblioth

 **User Story #5:** Mein Diagramm sollte ein `rect` Element für jeden Datenpunkt mit einer entsprechenden `class="bar"` haben, welche die Daten anzeigt.

-**User Story #6:** Each `.bar` should have the properties `data-date` and `data-gdp` containing `date` and `GDP` values.
+**User Story #6:** Jede `.bar` sollte die `data-date`- und `data-gdp`-Eigenschaften haben, welche die `date`- und `GDP`-Werte beinhalten.

-**User Story #7:** The `.bar` elements' `data-date` properties should match the order of the provided data.
+**User Story #7:** Die `data-date`-Eigenschaften des `.bar`-Elements sollten mit der Reihenfolge der angegebenen Daten übereinstimmen.

-**User Story #8:** The `.bar` elements' `data-gdp` properties should match the order of the provided data.
+**User Story #8:** Die `data-gdp`-Eigenschaften des `.bar`-Elements sollten mit der Reihenfolge der angegebenen Daten übereinstimmen.

-**User Story #9:** Each `.bar` element's height should accurately represent the data's corresponding `GDP`.
+**User Story #9:** Die Höhe jedes `.bar`-Elements sollte das entsprechende `GDP` der Daten exakt darstellen.

-**User Story #10:** The `data-date` attribute and its corresponding `.bar` element should align with the corresponding value on the x-axis.
+**User Story #10:** Das `data-date`-Attribut und sein zugehöriges `.bar`-Element sollten sich mit dem entsprechenden Wert auf der x-Achse ausrichten.

-**User Story #11:** The `data-gdp` attribute and its corresponding `.bar` element should align with the corresponding value on the y-axis.
+**User Story #11:** Das `data-gdp`-Attribut und sein zugehöriges `.bar`-Element sollten sich mit dem entsprechenden Wert auf der y-Achse ausrichten.

 **User Story #12:** Ich kann mit meiner Maus über einen Bereich fahren und einen Tooltip mit einem entsprechenden `id="tooltip"` sehen, das mir mehr Informationen über den Bereich anzeigt.

@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-choropleth-map

 Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil.

-Du kannst HTML, Javascript, CSS und die D3-SVG-basierte Visualisierungs-Bibliothek verwenden. Required DOM elements are queried on the moment of each test. Falls du ein Frontend-Framework (wie z.B. Vue) verwendest, kann es passieren, dass die Testergebnisse für dynamische Inhalte ungenau sind. Wir hoffen, dass wir sie irgendwann unterbringen können, aber diese Frameworks werden derzeit nicht für D3-Projekte unterstützt.
+Du kannst HTML, Javascript, CSS und die D3-SVG-basierte Visualisierungs-Bibliothek verwenden. Erforderliche DOM-Elemente werden zum Zeitpunkt eines jeden Tests abgefragt. Falls du ein Frontend-Framework (wie z.B. Vue) verwendest, kann es passieren, dass die Testergebnisse für dynamische Inhalte ungenau sind. Wir hoffen, dass wir sie irgendwann unterbringen können, aber diese Frameworks werden derzeit nicht für D3-Projekte unterstützt.

 **User Story #1:** Meine Choroplethkarte sollte einen Titel mit einer entsprechenden `id="title"` haben.

@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-heat-map

 Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil.

-Du kannst HTML, JavaScript, CSS und die D3-svg-basierte Visualisierungsbibliothek verwenden. Required DOM elements are queried on the moment of each test. Wenn du ein Frontend-Framework verwendest (z. B. Vue), sind die Testergebnisse für dynamische Inhalte möglicherweise ungenau. Wir hoffen, dass wir diese irgendwann berücksichtigen können, aber derzeit werden diese Frameworks nicht für D3-Projekte unterstützt.
+Du kannst HTML, JavaScript, CSS und die D3-svg-basierte Visualisierungsbibliothek verwenden. Erforderliche DOM-Elemente werden zum Zeitpunkt eines jeden Tests abgefragt. Wenn du ein Frontend-Framework verwendest (z. B. Vue), sind die Testergebnisse für dynamische Inhalte möglicherweise ungenau. Wir hoffen, dass wir diese irgendwann berücksichtigen können, aber derzeit werden diese Frameworks nicht für D3-Projekte unterstützt.

 **User Story #1:** Meine Heatmap sollte einen entsprechenden Titel mit einer entsprechenden `id="title"` haben.

@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-scatterplot-graph

 Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil.

-Sie können HTML, JavaScript, CSS und die D3-svg-basierte Visualisierungsbibliothek verwenden. Für die Tests müssen die Achsen mit Hilfe der D3-Achseneigenschaft erzeugt werden, die automatisch Markierungen entlang der Achse erzeugt. Diese Häkchen sind für das Bestehen der D3-Tests erforderlich, da ihre Position zur Bestimmung der Ausrichtung der grafisch dargestellten Elemente verwendet wird. Informationen zum Generieren von Achsen finden Sie unter <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. Wenn Sie ein Frontend-Framework verwenden (z. B. Vue), sind die Testergebnisse für dynamische Inhalte möglicherweise ungenau. Wir hoffen, dass wir sie irgendwann unterbringen können, aber diese Frameworks werden derzeit nicht für D3-Projekte unterstützt.
+Sie können HTML, JavaScript, CSS und die D3-svg-basierte Visualisierungsbibliothek verwenden. Für die Tests müssen die Achsen mit Hilfe der D3-Achseneigenschaft erzeugt werden, die automatisch Markierungen entlang der Achse erzeugt. Diese Häkchen sind für das Bestehen der D3-Tests erforderlich, da ihre Position zur Bestimmung der Ausrichtung der grafisch dargestellten Elemente verwendet wird. Informationen zum Generieren von Achsen finden Sie unter <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Erforderliche DOM-Elemente werden zum Zeitpunkt eines jeden Tests abgefragt. Wenn Sie ein Frontend-Framework verwenden (z. B. Vue), sind die Testergebnisse für dynamische Inhalte möglicherweise ungenau. Wir hoffen, dass wir sie irgendwann unterbringen können, aber diese Frameworks werden derzeit nicht für D3-Projekte unterstützt.

 **User Story #1:** Ich kann ein Titelelement sehen, das einen entsprechenden `id="title"` hat.

@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-treemap-diagram

 Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil.

-Du kannst HTML, JavaScript, CSS und die D3-svg-basierte Visualisierungsbibliothek verwenden. Die Tests erfordern, dass Achsen mit der Eigenschaft der D3-Achse erzeugt werden, welche automatisch Markierungen entlang der Achse bildet. Diese Markierungen sind notwendig für die D3-Tests, da ihre Positionen zur Bestimmung der Ausrichtung von Graphen verwendet werden. Informationen zum Generieren von Achsen findest du hier <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. Wenn du ein Frontend-Framework (wie z. B. Vue) verwendest, können die Testergebnisse für dynamische Inhalte ungenau sein. Wir hoffen, dass wir sie irgendwann unterbringen können, aber diese Frameworks werden derzeit nicht für D3-Projekte unterstützt.
+Du kannst HTML, JavaScript, CSS und die D3-svg-basierte Visualisierungsbibliothek verwenden. Die Tests erfordern, dass Achsen mit der Eigenschaft der D3-Achse erzeugt werden, welche automatisch Markierungen entlang der Achse bildet. Diese Markierungen sind notwendig für die D3-Tests, da ihre Positionen zur Bestimmung der Ausrichtung von Graphen verwendet werden. Informationen zum Generieren von Achsen findest du hier <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Erforderliche DOM-Elemente werden zum Zeitpunkt eines jeden Tests abgefragt. Wenn du ein Frontend-Framework (wie z. B. Vue) verwendest, können die Testergebnisse für dynamische Inhalte ungenau sein. Wir hoffen, dass wir sie irgendwann unterbringen können, aber diese Frameworks werden derzeit nicht für D3-Projekte unterstützt.

 **User Story #1:** Meine Tree Map sollte eine Bezeichnung mit der entsprechenden `id="title"` haben.

@@ -8,7 +8,7 @@ dashedName: add-a-tooltip-to-a-d3-element

 # --description--

-Ein Tooltip zeigt mehr Informationen über ein Element auf einer Seite an, wenn der User über das Element fährt. There are several ways to add a tooltip to a visualization. This challenge uses the SVG `title` element.
+Ein Tooltip zeigt mehr Informationen über ein Element auf einer Seite an, wenn der User über das Element fährt. Es gibt mehrere Möglichkeiten einer Visualisierung einen Tooltip hinzuzufügen. Diese Aufgabe verwendet das SVG `title`-Element.

 `title` wird mit der `text()`-Methode gekoppelt, um dynamisch Daten zu den Balken hinzuzufügen.

@@ -16,13 +16,13 @@ Die `select()`-Methode wählt ein Element aus dem Dokument aus. Sie nimmt ein Ar
 const anchor = d3.select("a");
 ```

-Im obigen Beispiel wird das erste Anker-Tag auf der Seite gefunden und ein HTML-Knoten für dieses in der Variable `anchor` gespeichert. Du kannst die Auswahl mit anderen Methoden verwenden. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods.
+Im obigen Beispiel wird das erste Anker-Tag auf der Seite gefunden und ein HTML-Knoten für dieses in der Variable `anchor` gespeichert. Du kannst die Auswahl mit anderen Methoden verwenden. Der `d3`-Teil des Beispiels ist ein Verweis auf das D3-Objekt, mit dem du auf D3-Methoden zugreifst.

 Zwei weitere nützliche Methoden sind `append()` und `text()`.

 Die `append()`-Methode akzeptiert das Element, welches du dem Dokument hinzufügen möchtest, als Argument. Es fügt einen HTML-Knoten einem bestimmten Element hinzu und gibt ein Handle zu diesem Knoten zurück.

-Die `text()`-Methode legt entweder den Text des ausgewählten Knotens fest oder ruft den aktuellen Text ab. To set the value, you pass a string as an argument inside the parentheses of the method.
+Die `text()`-Methode legt entweder den Text des ausgewählten Knotens fest oder ruft den aktuellen Text ab. Übergib ein String als Argument innerhalb der Klammern der Methode, um den Wert festzulegen.

 Hier ist ein Beispiel, das eine ungeordnete Liste auswählt, ein Listenelement anhängt und Text hinzufügt:

@@ -8,7 +8,7 @@ dashedName: change-styles-based-on-data

 # --description--

-Bei D3 geht es um die Visualisierung und Darstellung von Daten. Es ist wahrscheinlich, dass du das Format der Elemente auf der Grundlage der Daten ändern wirst. For example, you may want to color a data point blue if it has a value less than 20, and red otherwise. You can use a callback function in the `style()` method and include the conditional logic. The callback function uses the `d` parameter to represent the data point:
+Bei D3 geht es um die Visualisierung und Darstellung von Daten. Es ist wahrscheinlich, dass du das Format der Elemente auf der Grundlage der Daten ändern wirst. Zum Beispiel, kannst du einen Datenpunkt blau einfärben, wenn er einen Wert von weniger als 20 hat, ansonsten ist er rot. Du kannst eine Callback-Funktion innerhalb der `style()`-Methode anwenden und die bedingte Logik einfügen. Die Callback-Funktion verwendet den `d`-Parameter, um den Datenpunkt darzustellen:

 ```js
 selection.style("color", (d) => {
@@ -16,65 +16,65 @@ selection.style("color", (d) => {
 });
 ```

-The `style()` method is not limited to setting the `color` - it can be used with other CSS properties as well.
+Die `style()`-Methode kann nicht nur zum Festlegen der `color` verwendet werden - sie kann auch für andere CSS-Eigenschaften verwendet werden.

 # --instructions--

-Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns red, otherwise it returns green.
+Füge die `style()`-Methode zum Code im Editor hinzu, um die `color` der `h2`-Elemente bedingt festzulegen. Schreibe die Callback-Funktion so, dass sie rot zurückgibt, wenn der Datenwert kleiner ist als 20, und andernfalls grün.

-**Note:** You can use if-else logic, or the ternary operator.
+**Hinweis:** Du kannst die if-else-Logik oder den ternären Operator verwenden.

 # --hints--

-The first `h2` should have a `color` of red.
+Die erste `h2` sollte die `color` Rot haben.

 ```js
 assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
 ```

-The second `h2` should have a `color` of green.
+Die zweite `h2` sollte die `color` Grün haben.

 ```js
 assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
 ```

-The third `h2` should have a `color` of green.
+Die dritte `h2` sollte die `color` Grün haben.

 ```js
 assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
 ```

-The fourth `h2` should have a `color` of red.
+Die vierte `h2` sollte die `color` Rot haben.

 ```js
 assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
 ```

-The fifth `h2` should have a `color` of green.
+Die fünfte `h2` sollte die `color` Grün haben.

 ```js
 assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
 ```

-The sixth `h2` should have a `color` of red.
+Die sechste `h2` sollte die `color` Rot haben.

 ```js
 assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
 ```

-The seventh `h2` should have a `color` of green.
+Die siebte `h2` sollte die `color` Grün haben.

 ```js
 assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
 ```

-The eighth `h2` should have a `color` of red.
+Die achte `h2` sollte die `color` Rot haben.

 ```js
 assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
 ```

-The ninth `h2` should have a `color` of red.
+Die neunte `h2` sollte die `color` Rot haben.

 ```js
 assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
@@ -12,9 +12,9 @@ Bei den Balken- und Streu-Diagrammen werden die Daten direkt in das SVG eingezei

 In D3 gibt es Skalen, die bei der Darstellung von Daten helfen. `scales` sind Funktionen, die dem Programm mitteilen, wie eine Menge von unbearbeiteten Datenpunkten den SVG-Pixeln zugeordnet werden soll.

-For example, say you have a 100x500-sized SVG and you want to plot Gross Domestic Product (GDP) for a number of countries. Die Zahlen wären im Milliarden- oder Billionen-Dollar-Bereich. Du übergibst D3 einen Skalierungstyp, mit welchem du ihm mitteilst, wie die hohen BIP-Werte in dem 100x500 großen Bereich zu platzieren sind.
+Nehmen wir beispielsweise an, du hast ein SVG der Größe 100x500 und möchtest das Bruttoinlandsprodukt (BIP) für eine Reihe von Ländern darstellen. Die Zahlen wären im Milliarden- oder Billionen-Dollar-Bereich. Du übergibst D3 einen Skalierungstyp, mit welchem du ihm mitteilst, wie die hohen BIP-Werte in dem 100x500 großen Bereich zu platzieren sind.

-Es ist unwahrscheinlich, dass du die Rohdaten so darstellen würdest, wie sie sind. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your SVG width and height.
+Es ist unwahrscheinlich, dass du die Rohdaten so darstellen würdest, wie sie sind. Bevor du mit der Einzeichnung beginnst, legst du die Skala für deinen Datensatz fest, so dass die `x`- und `y`-Werte zu deiner SVG-Breite sowie -Höhe passen.

 D3 verfügt über verschiedene Skalierungstypen. Möchtest du eine lineare Skalierung (wie sie für quantitative Daten meist verwendet wird), verwendest du die D3-Methode `scaleLinear()`:

@@ -12,7 +12,7 @@ Standardmäßig verwenden Skalen die Identitätsbeziehung. Das bedeutet, dass de

 Angenommen ein Datensatz hat Werte zwischen 50 und 480. Dies ist die Eingangsinformation für eine Skala, die auch als <dfn>Domäne</dfn> bezeichnet wird.

-You want to map those points along the `x` axis on the SVG, between 10 units and 500 units. This is the output information, also known as the <dfn>range</dfn>.
+Diese Punkte sollten entlang der `x`-Achse auf der SVG zwischen 10 Einheiten und 500 Einheiten zugeordnet werden. Dies sind die Ausgabeinformationen, die auch als <dfn>range</dfn> bezeichnet werden.

 Die `domain()`- und `range()`-Methoden legen diese Werte für die Skala fest. Beide Methoden nehmen ein Array von mindestens zwei Elementen als Argument. Hier ist ein Beispiel:

@@ -14,7 +14,7 @@ In den vorherigen Aufgaben ging es um das Darstellen von Array-Daten und um das

 2) Gebe jedem `div` eine dynamische Höhe. Dies erreichst du mithilfe einer Callback-Funktion, die in der `style()`-Methode die Höhe auf den Datenwert setzt.

-Recall the format to set a style using a callback function:
+Erinnere dich an das Format zum Festlegen eines Stils mithilfe einer Callback-Funktion:

 ```js
 selection.style("cssProperty", (d) => d)
@@ -20,7 +20,7 @@ document.getElementsByClassName('message')[0].textContent="Here is the message";

 # --instructions--

-Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`.
+Füge einen Code innerhalb des `onclick`-Event-Handlers hinzu, um den Text innerhalb des `message`-Elements in `Here is the message` zu ändern.

 # --hints--

@@ -39,7 +39,7 @@ Aktualisiere den Code, um eine `GET`-Anfrage an die freeCodeCamp Katzen-Foto-API
 # --hints--


-Your code should use the fetched data to replace the inner HTML
+Dein Code sollte die abgerufenen Daten verwenden, um das innere HTML zu ersetzen

 ```js
 const catData = "dummy data";
@@ -62,13 +62,13 @@ async () => {
 ```


-Your code should make a `GET` request with `fetch`.
+Dein Code sollte eine `GET`-Anfrage mit `fetch` stellen.

 ```js
 assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
 ```

-Your code should use `then` to convert the response to JSON.
+Dein Code sollte `then` verwenden, um die Antwort in JSON zu konvertieren.

 ```js
 assert(
@@ -78,13 +78,13 @@ assert(
 );
 ```

-Your code should use `then` to handle the data converted to JSON by the other `then`.
+Dein Code sollte `then` verwenden, um die Daten zu verarbeiten, die von dem anderen `then` in JSON umgewandelt wurden.

 ```js
 assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g));
 ```

-Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
+Dein Code sollte das Element mit der ID `message` erhalten und sein inneres HTML in den String der JSON-Daten ändern.

 ```js
 assert(
@@ -28,7 +28,7 @@ Füge ein Klick-Event-Handler innerhalb der `DOMContentLoaded`-Funktion für das

 # --hints--

-Your code should use the `document.getElementById` method to select the element whose id is `getMessage`.
+Dein Code sollte die `document.getElementById`-Methode verwenden, um das Element auszuwählen, dessen ID `getMessage` entspricht.

 ```js
 assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
@@ -28,31 +28,31 @@ xhr.send(body);

 Du hast bereits mehrere dieser Methoden gesehen. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and passes `true` as the third parameter - indicating to perform the operation asynchronously.

-The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header.
+Die Methode `setRequestHeader` legt den Wert eines HTTP-Request-Headers fest, der Informationen über den Absender und die Anfrage enthält. Es muss nach der `open`-Methode, aber noch vor der `send`-Methode aufgerufen werden. Die beiden Parameter sind der Name des Headers und der Wert, der als der Körper des Headers festgelegt werden soll.

-Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. Therefore, the document's HTML can be updated.
+Als Nächstes bearbeitet der `onreadystatechange`-Event-Listener eine Änderung des Status der Anfrage. Ein `readyState` von `4` bedeutet, dass die Operation abgeschlossen ist und ein `status` von `201` bedeutet, dass es eine erfolgreiche Anfrage war. Daher kann der HTML-Code des Dokuments aktualisiert werden.

-Finally, the `send` method sends the request with the `body` value. The `body` consists of a `userName` and a `suffix` key.
+Schließlich sendet die `send`-Methode die Anfrage mit dem `body`-Wert ab. Der `body` besteht aus einem `userName` und einem `suffix`-Schlüssel.

 # --instructions--

-Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text `loves cats`.
+Aktualisiere den Code so, dass er eine `POST`-Anfrage an den API-Endpunkt stellt. Gib dann deinen Namen in das Eingabefeld ein und klicke auf `Send Message`. Deine AJAX Funktion sollte `Reply from Server will be here.` durch Daten vom Server ersetzen. Formatiere die Antwort so, dass dein Name zusammen mit dem Text `loves cats` angezeigt wird.

 # --hints--

-Your code should create a new `XMLHttpRequest`.
+Dein Code sollte eine neue `XMLHttpRequest` erstellen.

 ```js
 assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
 ```

-Your code should use the `open` method to initialize a `POST` request to the server.
+Dein Code sollte die `open`-Methode verwenden, um eine `POST`-Anfrage an den Server zu senden.

 ```js
 assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
 ```

-Your code should use the `setRequestHeader` method.
+Dein Code sollte die `setRequestHeader`-Methode verwenden.

 ```js
 assert(
@@ -62,13 +62,13 @@ assert(
 );
 ```

-Your code should have an `onreadystatechange` event handler set to a function.
+Dein Code sollte einen `onreadystatechange` Event-Handler auf eine Funktion gesetzt haben.

 ```js
 assert(code.match(/\.onreadystatechange\s*?=/g));
 ```

-Your code should get the element with class `message` and change its `textContent` to `userName loves cats`
+Dein Code sollte das Element mit der Klasse `message` erhalten und dessen `textContent` zu `userName loves cats` ändern

 ```js
 assert(
@@ -78,7 +78,7 @@ assert(
 );
 ```

-Your code should use the `send` method.
+Dein Code sollte die `send`-Methode verwenden.

 ```js
 assert(code.match(/\.send\(\s*?body\s*?\)/g));
@@ -20,7 +20,7 @@ Wenn du Replit verwendest, dann folge diesen Schritten, um das Projekt einzurich
 -   Daraufhin wird ein `.replit`-Fenster angezeigt.
 -   Wähle `Use run command` aus und klicke die `Done`-Schaltfläche.

-Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
+Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Gib anschließend die URL in das Solution Link-Feld ein. Füge optional einen Link zum Quellcode deines Projekts in das GitHub Link-Feld ein.

 # --instructions--

@@ -20,7 +20,7 @@ Wenn du Replit verwendest, dann folge diesen Schritten, um das Projekt einzurich
 -   Daraufhin wird ein `.replit`-Fenster angezeigt.
 -   Wähle `Use run command` aus und klicke auf die `Done`-Schaltfläche.

-Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
+Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Gib anschließend die URL in das Solution Link-Feld ein. Füge optional einen Link zum Quellcode deines Projekts in das GitHub Link-Feld ein.

 # --instructions--

@@ -51,7 +51,7 @@ async (getUserInput) => {
 };
 ```

-The form file input field has the `name` attribute set to `upfile`.
+Das `name`-Attribut im Eingabefeld des Formulars in der Datei ist auf `upfile` gesetzt.

 ```js
 async (getUserInput) => {
@@ -14,17 +14,17 @@ Erstelle eine vollständige JavaScript-Anwendung, die eine ähnliche Funktionali
 -   Benutze <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser" target="_blank" rel="noopener noreferrer nofollow">unser Replit-Starterprojekt</a>, um dein Projekt fertigzustellen.
 -   Verwende einen Site-Builder deiner Wahl, um das Projekt abzuschließen. Achte darauf, alle Dateien von unserem GitHub-Repo zu integrieren.

-If you use Replit, follow these steps to set up the project:
+Wenn du Replit verwendest, dann folge diesen Schritten, um das Projekt einzurichten:

-   Start by importing the project on Replit.
-   Next, you will see a `.replit` window.
-   Select `Use run command` and click the `Done` button.
+-   Beginne, indem du das Projekt in Replit importierst.
+-   Daraufhin wird ein `.replit`-Fenster angezeigt.
+-   Wähle `Use run command` aus und klicke auf die `Done`-Schaltfläche.

-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
+Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Gib anschließend die URL in das Solution Link-Feld ein. Füge optional einen Link zum Quellcode deines Projekts in das GitHub Link-Feld ein.

 # --hints--

-You should provide your own project, not the example URL.
+Du solltest dein eigenes Projekt angeben und nicht die Beispiel-URL.

 ```js
 (getUserInput) => {
@@ -36,7 +36,7 @@ You should provide your own project, not the example URL.
 };
 ```

-A request to `/api/whoami` should return a JSON object with your IP address in the `ipaddress` key.
+Eine Anfrage an `/api/whoami` sollte ein JSON-Objekt mit deiner IP-Adresse im `ipaddress`-Schlüssel zurückgeben.

 ```js
 (getUserInput) =>
@@ -48,7 +48,7 @@ A request to `/api/whoami` should return a JSON object with your IP address in t
  );
 ```

-A request to `/api/whoami` should return a JSON object with your preferred language in the `language` key.
+Eine Anfrage an `/api/whoami` sollte ein JSON-Objekt mit deiner bevorzugten Sprache im `language`-Schlüssel zurückgeben.

 ```js
 (getUserInput) =>
@@ -60,7 +60,7 @@ A request to `/api/whoami` should return a JSON object with your preferred langu
  );
 ```

-A request to `/api/whoami` should return a JSON object with your software in the `software` key.
+Eine Anfrage an `/api/whoami` sollte ein JSON-Objekt mit deiner Software im `software`-Schlüssel zurückgeben.

 ```js
 (getUserInput) =>
@@ -14,19 +14,19 @@ Erstelle eine vollständige JavaScript-Anwendung, die eine ähnliche Funktionali
 -   Benutze <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp"  target="_blank" rel="noopener noreferrer nofollow">unser Replit-Starter-Projekt</a>, um dein Projekt fertigzustellen.
 -   Verwende einen Site-Builder deiner Wahl, um das Projekt abzuschließen. Achte darauf, alle Dateien von unserem GitHub-Repo zu integrieren.

-If you use Replit, follow these steps to set up the project:
+Wenn du Replit verwendest, dann folge diesen Schritten, um das Projekt einzurichten:

-   Start by importing the project on Replit.
-   Next, you will see a `.replit` window.
-   Select `Use run command` and click the `Done` button.
+-   Beginne, indem du das Projekt in Replit importierst.
+-   Daraufhin wird ein `.replit`-Fenster angezeigt.
+-   Wähle `Use run command` aus und klicke auf die `Done`-Schaltfläche.

-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
+Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts an einem öffentlichen Ort gehostet wird. Gib anschließend die URL in das Solution Link-Feld ein. Füge optional einen Link zum Quellcode deines Projekts in das GitHub Link-Feld ein.

-**Note:** Time zones conversion is not a purpose of this project, so assume all sent valid dates will be parsed with `new Date()` as GMT dates.
+**Hinweis:** In diesem Projekt geht es nicht um die Umwandlung der Zeitzonen. Folglich kannst du davon ausgehen, dass alle gültigen Daten mit `new Date()` als GMT-Daten geparst werden.

 # --hints--

-You should provide your own project, not the example URL.
+Du solltest dein eigenes Projekt bereitstellen, nicht die Beispiel-URL.

 ```js
 (getUserInput) => {
@@ -36,7 +36,7 @@ You should provide your own project, not the example URL.
 };
 ```

-A request to `/api/:date?` with a valid date should return a JSON object with a `unix` key that is a Unix timestamp of the input date in milliseconds (as type Number)
+Eine Anfrage an `/api/:date?` mit einem gültigen Datum sollte ein JSON-Objekt mit einem `unix`-Schlüssel zurückgeben, bei dem es sich um ein Unix-Zeitstempel des Eingabedatums in Millisekunden (als Typ-Nummer) handelt

 ```js
 (getUserInput) =>
@@ -72,7 +72,7 @@ A request to `/api/:date?` with a valid date should return a JSON object with a
  );
 ```

-A request to `/api/1451001600000` should return `{ unix: 1451001600000, utc: "Fri, 25 Dec 2015 00:00:00 GMT" }`
+Eine Anfrage an `/api/1451001600000` sollte `{ unix: 1451001600000, utc: "Fri, 25 Dec 2015 00:00:00 GMT" }` zurückgeben

 ```js
 (getUserInput) =>
@@ -89,7 +89,7 @@ A request to `/api/1451001600000` should return `{ unix: 1451001600000, utc: "Fr
  );
 ```

-Your project can handle dates that can be successfully parsed by `new Date(date_string)`
+Dein Projekt kann Daten verarbeiten, die erfolgreich von `new Date(date_string)` geparst werden können

 ```js
 (getUserInput) =>
@@ -106,7 +106,7 @@ Your project can handle dates that can be successfully parsed by `new Date(date_
  );
 ```

-If the input date string is invalid, the API returns an object having the structure `{ error : "Invalid Date" }`
+Wenn der String des Eingabedatums ungültig ist, gibt die API ein Objekt mit der Struktur `{ error : "Invalid Date" }` zurück

 ```js
 (getUserInput) =>
@@ -120,7 +120,7 @@ If the input date string is invalid, the API returns an object having the struct
  );
 ```

-An empty date parameter should return the current time in a JSON object with a `unix` key
+Ein leerer Datumsparameter sollte die aktuelle Uhrzeit in einem JSON-Objekt mit einem `unix`-Schlüssel zurückgeben

 ```js
 (getUserInput) =>
@@ -135,7 +135,7 @@ An empty date parameter should return the current time in a JSON object with a `
  );
 ```

-An empty date parameter should return the current time in a JSON object with a `utc` key
+Ein leerer Datumsparameter sollte die aktuelle Uhrzeit in einem JSON-Objekt mit einem `utc`-Schlüssel zurückgeben

 ```js
 (getUserInput) =>
@@ -1,6 +1,6 @@
 ---
 id: bd7158d8c443edefaeb5bd0e
-title: URL Shortener Microservice
+title: URL-Verkürzungs-Microservice
 challengeType: 4
 forumTopicId: 301509
 dashedName: url-shortener-microservice
@@ -20,7 +20,7 @@ Wenn du Replit verwendest, folge diesen Schritten, um das Projekt einzurichten:
 -   Daraufhin wird ein `.replit`-Fenster angezeigt.
 -   Wähle `Use run command` aus und klicke auf die `Done`-Schaltfläche.

-Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
+Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Gib anschließend die URL in das Solution Link-Feld ein. Füge optional einen Link zum Quellcode deines Projekts in das GitHub Link-Feld ein.

 # --instructions--

@@ -40,7 +40,7 @@ Du solltest dein eigenes Projekt bereitstellen, nicht die Beispiel-URL.
 };
 ```

-You can POST a URL to `/api/shorturl` and get a JSON response with `original_url` and `short_url` properties. Hier siehst du ein Beispiel: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}`
+Du kannst eine URL an `/api/shorturl` POSTEN und eine JSON-Antwort mit `original_url`- und `short_url`-Eigenschaften erhalten. Hier siehst du ein Beispiel: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}`

 ```js
 async (getUserInput) => {
@@ -20,7 +20,7 @@ Wenn du Replit verwendest, dann folge diesen Schritten, um das Projekt einzurich
 -   Daraufhin wird ein `.replit`-Fenster angezeigt.
 -   Wähle `Use run command` aus und klicke auf die `Done`-Schaltfläche.

-Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts an einem öffentlichen Ort gehostet wird. Then submit the URL to it in the Solution Link field.
+Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts an einem öffentlichen Ort gehostet wird. Gib anschließend die URL in das Solution Link-Feld ein.

 Während des Entwicklungsprozesses ist es wichtig, überprüfen zu können, was in deinem Code passiert.

@@ -18,7 +18,7 @@ Liefere das Objekt `{"message": "Hello json"}` im JSON-Format als Antwort, um GE

 # --hints--

-The endpoint `/json` should serve the JSON object `{"message": "Hello json"}`
+Der Endpunkt `/json` sollte das JSON-Objekt `{"message": "Hello json"}` liefern

 ```js
 (getUserInput) =>
@@ -18,11 +18,11 @@ Lass uns eine Umgebungsvariable als Konfigurationsoption setzen.

 Erstelle eine `.env`-Datei im Hauptverzeichnis deines Projekts, speichere in dieser anschließend die Variabel `MESSAGE_STYLE=uppercase`.

-Greife nun in dem `/json`-GET-Route-Handler, den du in der letzten Aufgabe erstellt hast, auf`process.env.MESSAGE_STYLE` zu und verwandle das Antwort-Objekt der `message` in Großbuchstaben, wenn die Variable `uppercase` entspricht. Das Antwortobjekt sollte entweder `{"message": "Hello json"}` oder `{"message": "HELLO JSON"}` sein, je nachdem welchen Wert du für `MESSAGE_STYLE` gesetzt hast. Note that you must read the value of `process.env.MESSAGE_STYLE` **inside** the route handler, not outside of it, due to the way our tests run.
+Greife nun in dem `/json`-GET-Route-Handler, den du in der letzten Aufgabe erstellt hast, auf`process.env.MESSAGE_STYLE` zu und verwandle das Antwort-Objekt der `message` in Großbuchstaben, wenn die Variable `uppercase` entspricht. Das Antwortobjekt sollte entweder `{"message": "Hello json"}` oder `{"message": "HELLO JSON"}` sein, je nachdem welchen Wert du für `MESSAGE_STYLE` gesetzt hast. Beachte, dass du den Wert von `process.env.MESSAGE_STYLE` **innerhalb** des Route-Handlers lesen musst, und nicht außerhalb. Aufgrund der Art und Weise wie unsere Tests laufen.

 **Hinweis:** Nutzt du Replit, kannst du keine `.env`-Datei erstellen. Benutze stattdessen den eingebauten <dfn>SECRETS</dfn>-Tab, um eine Variabel hinzuzufügen.

-Wenn du lokal arbeitest, benötigst du das `dotenv`-Paket. Dieses lädt Umgebungsvariablen deiner `.env`-Datei in `process.env`. Das `dotenv`-Paket wurde bereits installiert und befindet sich in deiner `package.json`-Projektdatei. At the top of your `myApp.js` file, add `require('dotenv').config()` to load the environment variables.
+Wenn du lokal arbeitest, benötigst du das `dotenv`-Paket. Dieses lädt Umgebungsvariablen deiner `.env`-Datei in `process.env`. Das `dotenv`-Paket wurde bereits installiert und befindet sich in deiner `package.json`-Projektdatei. Füge am Anfang deiner `myApp.js`-Datei `require('dotenv').config()` hinzu, um die Umgebungsvariablen zu laden.

 # --hints--

@@ -20,11 +20,11 @@ Wenn du Replit verwendest, folge diesen Schritten, um das Projekt einzurichten:
 -   Als nächstes wird ein `.replit`-Fenster angezeigt.
 -   Wähle `Use run command` aus und klicke die `Done`-Schaltfläche.

-Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Then submit the URL to it in the Solution Link field.
+Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Gib anschließend die URL in das Solution Link-Feld ein.

-Die `package.json`-Datei stellt das Zentrum eines Node.js-Projekts oder npm-Pakets dar. It stores information about your project, similar to how the `head` section of an HTML document describes the content of a webpage. Es besteht aus einem einzigen JSON-Objekt, in dem Informationen in Schlüssel-Wert-Paaren gespeichert sind. There are only two required fields; `name` and `version`, but it’s good practice to provide additional information about your project that could be useful to future users or maintainers.
+Die `package.json`-Datei stellt das Zentrum eines Node.js-Projekts oder npm-Pakets dar. Es speichert Informationen über dein Projekt, ähnlich wie der `head`-Abschnitt eines HTML-Dokuments den Inhalt einer Webseite beschreibt. Es besteht aus einem einzigen JSON-Objekt, in dem Informationen in Schlüssel-Wert-Paaren gespeichert sind. Es gibt dort nur zwei Pflichtfelder: `name` und `version`. Es ist jedoch empfehlenswert, zusätzliche Informationen über dein Projekt anzugeben, die für zukünfige Benutzer oder Maintainer nützlich sein könnten.

-If you look at the file tree of your project, you will find the `package.json` file on the top level of the tree. Das ist die Datei, die du in den nächsten paar Aufgaben verbessern wirst.
+Wenn du dir den Dateibaum deines Projekts ansiehst, wirst du die `package.json`-Datei auf der obersten Ebene des Baums finden. Das ist die Datei, die du in den nächsten paar Aufgaben verbessern wirst.

 Eine der häufigsten Angaben in dieser Datei stellt das `author`-Feld dar. Es gibt an, wer das Projekt erstellt hat, und kann aus einer Zeichenfolge oder einem Objekt mit Kontaktdaten oder anderen Informationen bestehen. Für größere Projekte wird ein Objekt empfohlen, aber eine einfache Zeichenfolge wie das folgende Beispiel ist für dieses Projekt ausreichend.

@@ -34,7 +34,7 @@ Eine der häufigsten Angaben in dieser Datei stellt das `author`-Feld dar. Es gi

 # --instructions--

-Add your name as the `author` of the project in the `package.json` file.
+Trage in der `package.json`-Datei deinen Namen als `author` des Projekts ein.

 **Hinweis:** Denk daran, dass du JSON schreibst, daher müssen alle Feldnamen in doppelten Anführungszeichen (") gesetzt und durch ein Komma (,) getrennt werden.

@@ -10,7 +10,7 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning

 `Versions` der npm-Pakete im Abschnitt "dependencies" (Abhängigkeiten) deiner package.json-Datei folgen dem sogenannten Semantic Versioning (SemVer), einem Industriestandard für Software Versioning, der die Verwaltung von Abhängigkeiten erleichtern soll. Bibliotheken, Frameworks oder andere Tools, die auf npm veröffentlicht werden, sollten SemVer verwenden, um klar zu kommunizieren, welche Art von Änderungen Projekte erwarten können, wenn sie aktualisiert werden.

-Die Kenntnis von SemVer kann nützlich sein, wenn du eine Software entwickelst, die externe Abhängigkeiten nutzt (was du fast immer tust). Eines Tages wird dein Verständnis dieser Zahlen dich davor bewahren, versehentlich Änderungen an deinem Projekt vorzunehmen, ohne zu verstehen, warum Dinge, die gestern noch funktionierten, heute plötzlich nicht mehr funktionieren. This is how Semantic Versioning works according to the official website:
+Die Kenntnis von SemVer kann nützlich sein, wenn du eine Software entwickelst, die externe Abhängigkeiten nutzt (was du fast immer tust). Eines Tages wird dein Verständnis dieser Zahlen dich davor bewahren, versehentlich Änderungen an deinem Projekt vorzunehmen, ohne zu verstehen, warum Dinge, die gestern noch funktionierten, heute plötzlich nicht mehr funktionieren. So funktioniert Semantic Versioning laut der offiziellen Website:

 ```json
 "package": "MAJOR.MINOR.PATCH"
@@ -20,11 +20,11 @@ Die MAJOR-Version sollte erhöht werden, wenn du inkompatible API-Änderungen vo

 # --instructions--

-In the dependencies section of your `package.json` file, change the version of `@freecodecamp/example` to match MAJOR version 1, MINOR version 2 and PATCH version 13
+Ändere im Abschnitt "dependencies" (Abhängigkeiten) deiner `package.json`-Datei die Version von `@freecodecamp/example`, sodass sie sich an MAJOR Version 1, MINOR Version 2 und PATCH Version 13 anpasst

 # --hints--

-`"dependencies"` should include `"@freecodecamp/example"`.
+`"dependencies"` sollte `"@freecodecamp/example"` enthalten.

 ```js
 (getUserInput) =>
@@ -43,7 +43,7 @@ In the dependencies section of your `package.json` file, change the version of `
  );
 ```

-`"@freecodecamp/example"` version should be `"1.2.13"`.
+Die `"@freecodecamp/example"`-Version sollte `"1.2.13"` sein.

 ```js
 (getUserInput) =>
@@ -18,7 +18,7 @@ Um eine npm-Abhängigkeit auf die neueste PATCH-Version zu aktualisieren, kannst

 # --instructions--

-In the package.json file, your current rule for how npm may upgrade `@freecodecamp/example` is to use a specific version (`1.2.13`). But now, you want to allow the latest `1.2.x` version.
+In der package.json Datei ist deine aktuelle Regel, dass npm das `@freecodecamp/example` aktualisieren kann, indem du eine bestimmte Version (`1.2.13`) verwendest. Jetzt möchtest du aber die neueste `1.2.x`-Version zulassen.

 Verwende das (`~`) Tilde-Zeichen, um die Version von `@freecodecamp/example` in deinen Abhängigkeiten voranzustellen und erlaube npm auf jede neue _patch_ Version zu aktualisieren.

@@ -12,7 +12,7 @@ Wenn du den Callback nicht als letztes Argument an `Model.find()` (oder an die a

 # --instructions--

-Modify the `queryChain` function to find people who like the food specified by the variable named `foodToSearch`. Sortiere sie nach `name`, beschränke die Ergebnisse auf zwei Dokumente und blende ihr Alter aus. Chain `.find()`, `.sort()`, `.limit()`, `.select()`, and then `.exec()`. Übergebe den `done(err, data)`-Callback an `exec()`.
+Ändere die `queryChain`-Funktion so, dass sie Personen findet, die das Essen mögen, das in der Variablen namens `foodToSearch` angegeben ist. Sortiere sie nach `name`, beschränke die Ergebnisse auf zwei Dokumente und blende ihr Alter aus. Verkette `.find()`, `.sort()`, `.limit()`, `.select()`, und dann `.exec()`. Übergebe den `done(err, data)`-Callback an `exec()`.

 # --hints--

@@ -32,7 +32,7 @@ Erstelle ein Personen-Schema namens `personSchema` mit der folgenden Form:

 * Ein erforderliches `name`-Feld mit `String`-Datentyp
 * Ein `age`-Feld mit `Number`-Datentyp
-* A `favoriteFoods` field of type `[String]`
+* Ein `favoriteFoods`-Feld des Typs `[String]`

 Verwende die Mongoose-Basis-Schema-Typen. Wenn du möchtest, kannst du auch weitere Felder hinzufügen. Verwende hierzu einfache Validatoren – bspw. „required“ oder „unique“ – und lege Standardwerte fest. Schau dir hierzu unseren <a href="https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/" target="_blank" rel="noopener noreferrer nofollow">Mongoose-Artikel</a> an.

@@ -12,7 +12,7 @@ dashedName: delete-many-documents-with-model-remove

 # --instructions--

-Ändere die `removeManyPeople`-Funktion so, dass sie mithilfe von `Model.remove()` alle Personen löscht, deren Namen in der Variable `nameToRemove` enthalten sind. Pass it to a query document with the `name` field set, and a callback.
+Ändere die `removeManyPeople`-Funktion so, dass sie mithilfe von `Model.remove()` alle Personen löscht, deren Namen in der Variable `nameToRemove` enthalten sind. Übergib es an ein Query-Dokument, in dem das Feld `name` gesetzt ist, und ein Callback.

 **Hinweis:** Das `Model.remove()` gibt nicht das gelöschte Dokument zurück, sondern ein JSON-Objekt, das das Ergebnis des Vorgangs und die Anzahl der betroffenen Elemente enthält. Vergiss nicht, ihn an den `done()`-Callback zu übergeben, da wir ihn in Tests verwenden.

@@ -8,7 +8,7 @@ dashedName: delete-one-document-using-model-findbyidandremove

 # --description--

-`findByIdAndRemove` and `findOneAndRemove` are like the previous update methods. Sie übergeben das gelöschte Dokument an die Datenbank. Verwende wie üblich das Funktionsargument `personId` als Suchbegriff.
+`findByIdAndRemove` und `findOneAndRemove` sind wie die vorherigen Update-Methoden. Sie übergeben das gelöschte Dokument an die Datenbank. Verwende wie üblich das Funktionsargument `personId` als Suchbegriff.

 # --instructions--

@@ -14,23 +14,23 @@ Bei der Arbeit an diesen Aufgaben wirst du deinen Code mithilfe folgender Method
 - Benutze <a href="https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose" target="_blank" rel="noopener noreferrer nofollow">unser Replit-Starter-Projekt</a>, um diese Aufgaben abzuschließen.
 - Verwende einen Site-Builder deiner Wahl, um das Projekt abzuschließen. Achte darauf, alle Dateien von unserem GitHub-Repo zu integrieren.

-If you use Replit, follow these steps to set up the project:
+Wenn du Replit verwendest, dann folge diesen Schritten, um das Projekt einzurichten:

-   Start by importing the project on Replit.
-   Next, you will see a `.replit` window.
-   Select `Use run command` and click the `Done` button.
+-   Beginne, indem du das Projekt in Replit importierst.
+-   Daraufhin wird ein `.replit`-Fenster angezeigt.
+-   Wähle `Use run command` aus und klicke die `Done`-Schaltfläche.

-When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field.
+Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projekts irgendwo öffentlich gehostet wird. Gib anschließend die URL in das Solution Link-Feld ein.

-In this challenge, you will set up a MongoDB Atlas database and import the required packages to connect to it.
+In dieser Aufgabe wirst du eine eine MongoDB-Atlas-Datenbank einrichten und die erforderlichen Pakete importieren, um dich mit ihr zu verbinden.

-Follow <a href='https://www.freecodecamp.org/news/get-started-with-mongodb-atlas/' target="_blank" rel="noopener noreferrer nofollow">this tutorial</a> to set up a hosted database on MongoDB Atlas.
+Folge <a href='https://www.freecodecamp.org/news/get-started-with-mongodb-atlas/' target="_blank" rel="noopener noreferrer nofollow">diesem Tutorial</a>, um eine gehostete Datenbank mit MongoDB Atlas einzurichten.

 # --instructions--

-`mongoose@^5.11.15` has been added to your project’s `package.json` file. First, require mongoose as `mongoose` in `myApp.js`. Next, create a `.env` file and add a `MONGO_URI` variable to it. Its value should be your MongoDB Atlas database URI. Be sure to surround the URI with single or double quotes, and remember that you can't use spaces around the `=` in environment variables. Zum Beispiel: `MONGO_URI='VALUE'`.
+`mongoose@^5.11.15` wurde der `package.json`-Datei deines Projekts hinzugefügt. Fordere zunächst Mongoose als `mongoose` in `myApp.js` an. Erstelle als Nächstes eine `.env`-Datei und füge dieser eine `MONGO_URI`-Variable hinzu. Ihr Wert sollte deine MongoDB-Atlas-Datenbank-URI sein. Be sure to surround the URI with single or double quotes, and remember that you can't use spaces around the `=` in environment variables. Zum Beispiel: `MONGO_URI='VALUE'`.

-**Note:** If you are using Replit, you cannot create a `.env` file. Instead, use the built-in <dfn>SECRETS</dfn> tab to add the variable. <em>Do not</em> surround the values with quotes when using the <em>SECRETS</em> tab.
+**Hinweis:** Wenn du Replit nutzt, kannst du keine `.env`-Datei erstellen. Verwende stattdessen den eingebauten <dfn>SECRETS</dfn>-Tab, um die Variable hinzuzufügen. <em>Do not</em> surround the values with quotes when using the <em>SECRETS</em> tab.

 Sobald du fertig bist, verbinde dich mit der Datenbank durch Aufruf der `connect`-Methode innerhalb deiner `myApp.js`-Datei unter Verwendung der folgenden Syntax:

@@ -40,7 +40,7 @@ mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true }

 # --hints--

-"mongoose version ^5.11.15" dependency should be in package.json
+Abhängigkeit "mongoose Version ^5.11.15" sollte sich in package.json befinden

 ```js
 (getUserInput) =>
@@ -60,7 +60,7 @@ mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true }
  );
 ```

-"mongoose" should be connected to a database
+"mongoose" sollte mit einer Datenbank verbunden sein

 ```js
 (getUserInput) =>
@@ -8,7 +8,7 @@ dashedName: perform-classic-updates-by-running-find-edit-then-save

 # --description--

-In the good old days, this was what you needed to do if you wanted to edit a document, and be able to use it somehow (e.g. sending it back in a server response). Mongoose hat eine eigene Aktualisierungsmethode: `Model.update()`. Sie ist an den Low-Level-Mongo-Treiber gebunden. Sie kann viele Dokumente, die bestimmten Kriterien entsprechen, auf einmal bearbeiten – allerdings sendet sie nicht das aktualisierte Dokument zurück, sondern nur eine „Statusmeldung“. Außerdem erschwert sie Modell-Validierungen, da sie direkt den Mongo-Treiber aufruft.
+In den guten alten Zeiten war dies notwendig, wenn du ein Dokument editieren und es in irgendeiner Weise nutzen wolltest (bspw. als Server-Antwort zurückschicken). Mongoose hat eine eigene Aktualisierungsmethode: `Model.update()`. Sie ist an den Low-Level-Mongo-Treiber gebunden. Sie kann viele Dokumente, die bestimmten Kriterien entsprechen, auf einmal bearbeiten – allerdings sendet sie nicht das aktualisierte Dokument zurück, sondern nur eine „Statusmeldung“. Außerdem erschwert sie Modell-Validierungen, da sie direkt den Mongo-Treiber aufruft.

 # --instructions--

@@ -8,13 +8,13 @@ dashedName: perform-new-updates-on-a-document-using-model-findoneandupdate

 # --description--

-Neuere Versionen von Mongoose verfügen über Methoden zur Vereinfachung der Aktualisierung von Dokumenten. Einige fortgeschrittene Funktionen (z. B. Pre/Post-Hooks, Validierung) verhalten sich bei diesem Ansatz anders, so dass die klassische Methode in vielen Situationen immer noch nützlich ist. `findByIdAndUpdate()` can be used when searching by id.
+Neuere Versionen von Mongoose verfügen über Methoden zur Vereinfachung der Aktualisierung von Dokumenten. Einige fortgeschrittene Funktionen (z. B. Pre/Post-Hooks, Validierung) verhalten sich bei diesem Ansatz anders, so dass die klassische Methode in vielen Situationen immer noch nützlich ist. `findByIdAndUpdate()` kann bei der Suche über die ID verwendet werden.

 # --instructions--

 Ändere die `findAndUpdate`-Funktion, um eine Person durch `Name` zu finden und setze das Alter der Person auf `20`. Verwende den Funktionsparameter `personName` als Suchbegriff.

-**Note:** You should return the updated document. Dazu musst du das Options-Dokument `{ new: true }` als das 3. Argument an `findOneAndUpdate()` übergeben. Standardmäßig geben diese Methoden das unveränderte Objekt zurück.
+**Hinweis:** Du solltest das aktualisierte Dokument zurückgeben. Dazu musst du das Options-Dokument `{ new: true }` als das 3. Argument an `findOneAndUpdate()` übergeben. Standardmäßig geben diese Methoden das unveränderte Objekt zurück.

 # --hints--

@@ -1,6 +1,6 @@
 ---
 id: 587d7fb7367417b2b2512c0d
-title: Use model.findById() to Search Your Database By _id
+title: Verwende model.findById() um deine Datenbank anhand der _id zu durchsuchen
 challengeType: 2
 forumTopicId: 301544
 dashedName: use-model-findbyid-to-search-your-database-by-id
@@ -12,7 +12,7 @@ Wenn ein Dokument gespeichert wird, fügt MongoDB automatisch das Feld `_id` hin

 # --instructions--

-Modify the `findPersonById` to find the only person having a given `_id`, using `Model.findById() -> Person`. Verwende das Funktionsargument `personId` als Suchbegriff.
+Modifiziere die `findPersonById`, um die einzige Person mit der gegebenen `_id` zu finden, indem du `Model.findById() -> Person` verwendest. Verwende das Funktionsargument `personId` als Suchbegriff.

 # --hints--

@@ -8,7 +8,7 @@ dashedName: use-model-findone-to-return-a-single-matching-document-from-your-dat

 # --description--

-`Model.findOne()` behaves like `Model.find()`, but it returns only one document (not an array), even if there are multiple items. Es ist besonders nützlich bei der Suche nach Eigenschaften, die du als eindeutig deklariert hast.
+`Model.findOne()` verhält sich wie `Model.find()`, aber es gibt nur ein Dokument (kein Array) zurück, auch wenn mehrere Elemente vorhanden sind. Es ist besonders nützlich bei der Suche nach Eigenschaften, die du als eindeutig deklariert hast.

 # --instructions--

@@ -8,15 +8,15 @@ dashedName: authentication-strategies

 # --description--

-Eine Strategie ist eine Möglichkeit, einen Benutzer zu authentifizieren. Du kannst eine Strategie anwenden, die es Nutzern ermöglicht, sich entweder auf Grundlage lokal gespeicherter Informationen zu authentifizieren (sofern sie sich zuerst registrieren) oder mithilfe verschiedener Anbieter wie Google oder GitHub. Für dieses Projekt werden wir die Passport-Middleware verwenden. Passport provides a comprehensive set of strategies that support authentication using a username and password, GitHub, Google, and more.
+Eine Strategie ist eine Möglichkeit, einen Benutzer zu authentifizieren. Du kannst eine Strategie anwenden, die es Nutzern ermöglicht, sich entweder auf Grundlage lokal gespeicherter Informationen zu authentifizieren (sofern sie sich zuerst registrieren) oder mithilfe verschiedener Anbieter wie Google oder GitHub. Für dieses Projekt werden wir die Passport-Middleware verwenden. Passport bietet eine umfassende Reihe von Strategien, die die Authentifizierung mit einem Benutzernamen und Passwort, GitHub, Google und mehr unterstützen.

-`passport-local@~1.0.0` has already been added as a dependency. Add it to your server as follows:
+`passport-local@~1.0.0` ist bereits als Abhängigkeit hinzugefügt worden. Füge ihn wie folgt zu Ihrem Server hinzu:

 ```javascript
 const LocalStrategy = require('passport-local');
 ```

-Tell passport to **use** an instantiated `LocalStrategy` object with a few settings defined. Make sure this (as well as everything from this point on) is encapsulated in the database connection since it relies on it!:
+Teile Passport mithilfe von **use** mit, ein instanziiertes `LocalStrategy`-Objekt mit bestimmten Einstellungen zu verwenden. Vergewissere dich, dass dies (wie auch alles andere ab jetzt) in der Datenbankverbindung gekapselt ist, da sie davon abhängt!:

 ```javascript
 passport.use(new LocalStrategy((username, password, done) => {
@@ -30,13 +30,13 @@ passport.use(new LocalStrategy((username, password, done) => {
 }));
 ```

-This is defining the process to use when you try to authenticate someone locally. First, it tries to find a user in your database with the username entered. Then, it checks for the password to match. Finally, if no errors have popped up that you checked for (e.g. an incorrect password), the `user` object is returned and they are authenticated.
+Hier wird der Prozess definiert, der verwendet werden soll, wenn du versuchst, jemanden lokal zu authentifizieren. Zunächst wird versucht, in deiner Datenbank einen Benutzer mit dem eingegebenen Benutzernamen zu finden. Dann wird geprüft, ob das Kennwort übereinstimmt. Wenn keine Fehler aufgetreten sind, auf die du geprüft hast (z. B. ein falsches Passwort), wird das `user`-Objekt zurückgegeben und der Benutzer ist authentifiziert.

-Many strategies are set up using different settings. Generally, it is easy to set it up based on the README in that strategy's repository. A good example of this is the GitHub strategy where you don't need to worry about a username or password because the user will be sent to GitHub's auth page to authenticate. As long as they are logged in and agree then GitHub returns their profile for you to use.
+Viele Strategien werden mit unterschiedlichen Einstellungen eingerichtet. Im Allgemeinen ist es einfach, sie anhand der README im Repository der jeweiligen Strategie einzurichten. Ein gutes Beispiel hierfür ist die GitHub-Strategie, bei der Sie sich nicht um einen Benutzernamen oder ein Passwort kümmern müssen, da der Benutzer zur Authentifizierung an die GitHub-Authentifizierungsseite weitergeleitet wird. Solange sie angemeldet sind und zustimmen, gibt GitHub ihr Profil zurück, das du verwenden kannst.

-In the next step, you will set up how to actually call the authentication strategy to validate a user based on form data.
+Im nächsten Schritt richten Sie ein, wie die Authentifizierungsstrategie aufgerufen werden soll, um einen Benutzer anhand von Formulardaten zu überprüfen.

-Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. If you're running into errors, you can <a href="https://forum.freecodecamp.org/t/advanced-node-and-express/567135#authentication-strategies-6" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. Wenn du auf Fehler stößt, kannst du <a href="https://forum.freecodecamp.org/t/advanced-node-and-express/567135#authentication-strategies-6" target="_blank" rel="noopener noreferrer nofollow">das bis zu diesem Punkt abgeschlossene Projekt überprüfen</a>.

 # --hints--

@@ -55,7 +55,7 @@ async (getUserInput) => {
 }
 ```

-Passport-local should be correctly required and set up.
+Passport-local sollte korrekt benötigt und eingerichtet werden.

 ```js
 async (getUserInput) => {
--- a/Show More
+++ b/Show More