diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index e5cb5f3dcc7..43f2b54e012 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -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-- diff --git a/curriculum/challenges/chinese-traditional/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml b/curriculum/challenges/chinese-traditional/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml index a145a188e77..c21dafe737a 100644 --- a/curriculum/challenges/chinese-traditional/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml +++ b/curriculum/challenges/chinese-traditional/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml @@ -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# 和微軟認證考試' diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md index 6f2563ab684..7e3e938d4cd 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -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"`. **注意:** 音頻片段的播放速度可能會快到令我們難以理解,但是對於屏幕閱讀器用戶來說這是正常速度。 diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md index 4b0e751842d..d36ca6ed9ee 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md @@ -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 for...in loop to do this. The for...in loop looks like: +有時候你需要遍歷一個對象中的所有鍵。 你可以使用 for...in 循環來做這件事。 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 for...in 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`。 在這個函數中使用 for...in 語句來遍歷 `allUsers` 對象,並返回 `online` 屬性爲 `true` 的用戶數量。 一個可以傳遞給 `countOnline` 的對象的例子顯示如下。 每個用戶都有 `online` 屬性,其屬性值爲 `true` 或 `false`。 ```js { diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md index 6642f115b4f..56ab2cc5019 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md @@ -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*=/) diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md index ddea620f503..d97f3df904a 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md @@ -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( diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md index 8112063e803..20669e97ef7 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md @@ -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-- diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md index ee3934c0aa6..cf6adc8b57b 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md @@ -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` 對象。 diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md index 6b83efa715a..f71a14ab02d 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md @@ -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-- diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md index 75226a2cb8d..9b78df73a58 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md @@ -65,7 +65,7 @@ assert.isFunction(Thermostat); assert.isFunction(Thermostat?.constructor); ``` -The `class` keyword should be used. +應該使用 `class` 關鍵字。 ```js assert.match(code, /class/); diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md index 5a2164188e4..9fbdb7146e9 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md @@ -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) => { diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md index af59edc8e49..01b7f379b06 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md @@ -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')); diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md index 5079cf7b547..3a001769ed4 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md @@ -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-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md index 91820544475..cd7233ab193 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md @@ -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` 元素。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index bbb81c6106c..95e4b8537e9 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -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 `
`, which itself has the parent element of `body`. +例如,你的 `jQuery Playground` 中的 `h3` 標籤的父標籤是 `
`,而這個標籤的父標籤是 `body`。 jQuery 有一個 `parent()` 方法,可以訪問被選取標籤的父標籤。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/pass-an-array-as-props.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/pass-an-array-as-props.md index 71da243588b..3fcf8175ad0 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/pass-an-array-as-props.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/pass-an-array-as-props.md @@ -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-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/write-a-counter-with-redux.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/write-a-counter-with-redux.md index e560ba4f485..dc555814fc5 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/write-a-counter-with-redux.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/write-a-counter-with-redux.md @@ -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'); diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md index 315b9a0fc1f..868fa659089 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md @@ -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-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md index 00156e4df6e..905caf1f9d5 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md @@ -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-- diff --git a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md index d7f08525a68..c4339782a8f 100644 --- a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md +++ b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md @@ -29,7 +29,7 @@ dashedName: introduction-to-data-analysis --- -分析數據並得出結論。 +挑選一個期望的分析結論。 --- diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index ed372e5290c..0f58ae5ece0 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -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-- diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md index 28e4d275a92..124b64d9d6f 100644 --- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md +++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md @@ -9,7 +9,7 @@ dashedName: build-a-data-graph-explorer 你將使用 Google Colaboratory 來完成這個項目。 -Once you complete the project, submit your project link below. 如果你提交的是 Google Colaboratory 的鏈接,請確保鏈接分享選項爲 “anyone with the link”。 +完成項目之後,請在下方提交你的項目鏈接。 如果你提交的是 Google Colaboratory 的鏈接,請確保鏈接分享選項爲 “anyone with the link”。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md index 43ccce59d1c..81a88c2cd52 100644 --- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md +++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md @@ -9,7 +9,7 @@ dashedName: build-three-math-games 你將使用 Google Colaboratory 來完成這個項目。 -Once you complete the project, submit your project link below. 如果你提交的是 Google Colaboratory 的鏈接,請確保鏈接分享選項爲 “anyone with the link”。 +完成項目之後,請在下方提交你的項目鏈接。 如果你提交的是 Google Colaboratory 的鏈接,請確保鏈接分享選項爲 “anyone with the link”。 # --instructions-- diff --git a/curriculum/challenges/chinese/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml b/curriculum/challenges/chinese/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml index a145a188e77..f42c95261d2 100644 --- a/curriculum/challenges/chinese/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml +++ b/curriculum/challenges/chinese/00-certifications/foundational-c-sharp-with-microsoft-certification/foundational-c-sharp-with-microsoft.yml @@ -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# 和微软认证考试' diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md index c729bc93cff..d31644706d3 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -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"`. **注意:** 音频片段的播放速度可能会快到令我们难以理解,但是对于屏幕阅读器用户来说这是正常速度。 diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md index b1fd23b3b35..26902bbc49a 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md @@ -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 for...in loop to do this. The for...in loop looks like: +有时候你需要遍历一个对象中的所有键。 你可以使用 for...in 循环来做这件事。 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 for...in 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`。 在这个函数中使用 for...in 语句来遍历 `allUsers` 对象,并返回 `online` 属性为 `true` 的用户数量。 一个可以传递给 `countOnline` 的对象的例子显示如下。 每个用户都有 `online` 属性,其属性值为 `true` 或 `false`。 ```js { diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md index a2273a79d99..0b2c251f9db 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md @@ -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*=/) diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md index 91ac6514477..10454b4c815 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md @@ -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( diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md index 0740394823e..6e9fedf717c 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md @@ -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-- diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md index 6ba45ca1780..c635d3c0e4e 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md @@ -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` 对象。 diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md index 4728dbe55f2..d86de4c1853 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md @@ -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-- diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md index 0aac6bddb02..ed153af8f35 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md @@ -65,7 +65,7 @@ assert.isFunction(Thermostat); assert.isFunction(Thermostat?.constructor); ``` -The `class` keyword should be used. +应该使用 `class` 关键字。 ```js assert.match(code, /class/); diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md index ab8d371891e..3b9db5bb1cd 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md @@ -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) => { diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md index c63332b89f2..41f2e40321e 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md @@ -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')); diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md b/curriculum/challenges/chinese/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md index eaee5ed9d0f..6dc15eeea6b 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md @@ -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-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md index 67b9bfaa10c..b8d896ee0a3 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md @@ -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` 元素。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index 5d35c2154f6..31a70d47c0a 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -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 `
`, which itself has the parent element of `body`. +例如,你的 `jQuery Playground` 中的 `h3` 标签的父标签是 `
`,而这个标签的父标签是 `body`。 jQuery 有一个 `parent()` 方法,可以访问被选取标签的父标签。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-an-array-as-props.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-an-array-as-props.md index 80feac709da..467fba00233 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-an-array-as-props.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/pass-an-array-as-props.md @@ -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-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/redux/write-a-counter-with-redux.md b/curriculum/challenges/chinese/03-front-end-development-libraries/redux/write-a-counter-with-redux.md index 05530dd68fc..83d0d26d3b4 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/redux/write-a-counter-with-redux.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/redux/write-a-counter-with-redux.md @@ -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'); diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md index 2e3276b286e..8e0b36b1e5e 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md @@ -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-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md index 181a6f4c02d..ba9b91e1f2e 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md @@ -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-- diff --git a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md index e63d7c64e04..4709d1c715e 100644 --- a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md +++ b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md @@ -29,7 +29,7 @@ dashedName: introduction-to-data-analysis --- -分析数据并得出结论。 +挑选一个期望的分析结论。 --- diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index 745c8dba21c..b09ca724929 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -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-- diff --git a/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md index cffc8806e58..a462eae35bc 100644 --- a/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md +++ b/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md @@ -9,7 +9,7 @@ dashedName: build-a-data-graph-explorer 你将使用 Google Colaboratory 来完成这个项目。 -Once you complete the project, submit your project link below. 如果你提交的是 Google Colaboratory 的链接,请确保链接分享选项为 “anyone with the link”。 +完成项目之后,请在下方提交你的项目链接。 如果你提交的是 Google Colaboratory 的链接,请确保链接分享选项为 “anyone with the link”。 # --instructions-- diff --git a/curriculum/challenges/chinese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/chinese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md index 8d2ea16b9eb..fd7de334fd9 100644 --- a/curriculum/challenges/chinese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md +++ b/curriculum/challenges/chinese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md @@ -9,7 +9,7 @@ dashedName: build-three-math-games 你将使用 Google Colaboratory 来完成这个项目。 -Once you complete the project, submit your project link below. 如果你提交的是 Google Colaboratory 的链接,请确保链接分享选项为 “anyone with the link”。 +完成项目之后,请在下方提交你的项目链接。 如果你提交的是 Google Colaboratory 的链接,请确保链接分享选项为 “anyone with the link”。 # --instructions-- diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index e33dd90ec13..280ce63976a 100644 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -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-- diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md index 380767efcf7..ba89e27c141 100644 --- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md +++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md @@ -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 for...in loop to do this. The for...in loop looks like: +Manchmal musst du alle Schlüssel innerhalb eines Objekts durchlaufen. Du kannst dazu eine for...in-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 for...in 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 for...in 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 { diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md index a379151e4e3..da7478ae36d 100644 --- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md +++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md @@ -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*=/) diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md index f66b78e96dc..371e2b4f74b 100644 --- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md +++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md @@ -11,7 +11,7 @@ dashedName: comparisons-with-the-logical-and-operator Manchmal musst du mehr als eine Sache auf einmal testen. Der logische Und-Operator (`&&`) gibt `true` zurück, wenn und nur wenn die Operanden 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 logical and 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 logical and geschrieben werden. ```js if (num > 5 && num < 10) { diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md index fb4b20f55d1..64337587787 100644 --- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md +++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md @@ -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 logical or 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 logical and geschrieben werden. ```js if (num > 10 || num < 5) { diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md index 6216faa357d..91b3c1b86a2 100644 --- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md +++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md @@ -11,13 +11,13 @@ dashedName: escape-sequences-in-strings Anführungszeichen sind nicht die einzigen Zeichen, die innerhalb eines Strings ausgelassen werden können. Escape-Sequenzen ermöglichen es dir, Zeichen zu verwenden, die du sonst nicht in einem String verwenden könntest. -
CodeAusgabe
\'Einzelnes Anführungszeichen
\"Doppeltes Anführungszeichen
\\Backslash
\nZeilenumbruch
\tTabulator
\rWagenrücklauf (Carriage Return)
\bbackspace
\fSeitenvorschub (Formfeed)
+
CodeAusgabe
\'Einzelnes Anführungszeichen
\"Doppeltes Anführungszeichen
\\Backslash
\nZeilenumbruch
\tTabulator
\rWagenrücklauf (Carriage Return)
\bBackspace
\fSeitenvorschub (Formfeed)
-*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.
 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));
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index ce25d114e82..1cd86b2c681 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -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(
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index 7031b5e6618..a0a5597f115 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -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--
 
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index 4b1b7abbaf3..ea8ba592988 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -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(
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
index 57e2fc30166..95ea1b93d86 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
@@ -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 switch statement. A `switch` statement compares the value to the case statements which define various possible values. Any valid JavaScript statements can be executed inside a case 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 switch statement. Eine `switch`-Anweisung vergleich den Wert einen mit der case-Anweisungen, in denen verschiedene mögliche Werte definiert werden. Any valid JavaScript statements can be executed inside a case block and will run from the first matched `case` value until a `break` is encountered.
 
 Hier ist ein Beispiel für eine `switch`-Anweisung:
 
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md
index 26fab336862..998251231f0 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md
@@ -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--
 
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
index 5745f31b855..752de18153f 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
@@ -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--
 
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md
index d17adc6c8c5..35113b7bd5f 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md
@@ -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/);
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
index 02d9e8a6ab5..030eaee2047 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
@@ -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) => {
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
index 4c0f1643936..082fd7a1a64 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
@@ -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'));
diff --git a/curriculum/challenges/german/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md b/curriculum/challenges/german/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
index ac5535caca7..e86ef93c3a3 100644
--- a/curriculum/challenges/german/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
+++ b/curriculum/challenges/german/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
@@ -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--
 
diff --git a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
index 4c3933e359a..464472988ce 100644
--- a/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
+++ b/curriculum/challenges/german/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
@@ -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  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--
 
diff --git a/curriculum/challenges/german/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/german/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md
index 27bbd6d12aa..81eed53d733 100644
--- a/curriculum/challenges/german/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md
+++ b/curriculum/challenges/german/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md
@@ -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 `
`, which itself has the parent element of `body`. +Zum Beispiel enthält das `h3`-Element in deinem `jQuery Playground` das Elternelement von `
`, 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. diff --git a/curriculum/challenges/german/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md b/curriculum/challenges/german/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md index 0896e9eedb8..a8dce66f141 100644 --- a/curriculum/challenges/german/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md +++ b/curriculum/challenges/german/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md @@ -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-- diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md index 950fdfd8bfc..29a5d3d27f4 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md @@ -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: . 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: . 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. diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md index 5ce87064341..e3d72c97a42 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md @@ -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. diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md index 64eac8be22d..11eb1fdc22b 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md @@ -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. diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md index 6492143bf9f..02b022804a1 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md @@ -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 . 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 . 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. diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md index 0ff4b329861..7f9f98028c7 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md @@ -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 . 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 . 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. diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md index 13fae2e6a59..bfd7f8cb945 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md @@ -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. diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md index d13505ae42f..b8b69db17d2 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md @@ -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: diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md index 984f2a7122d..afd207aa5f6 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md @@ -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)'); diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md index 21cd156e874..fd19edfa6e6 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md @@ -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()`: diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md index e1480891986..4ee6c98664b 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md @@ -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 Domäne 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 range. +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 range 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: diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md index 832a6ba7cac..a01e32a276d 100644 --- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md @@ -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) diff --git a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md index f0dd8440617..42f8c12d8cc 100644 --- a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md +++ b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md @@ -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-- diff --git a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 6bfb5b9f3c5..31217db8de0 100644 --- a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -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( diff --git a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md index 41abe4dedc6..9280f8d7cb7 100644 --- a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md +++ b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md @@ -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)); diff --git a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md index 35d695bad26..8e102c76215 100644 --- a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md +++ b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md @@ -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)); diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 96405139ef4..e3d0c11f764 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -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-- diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md index a7517b27c11..a09cb307da8 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md @@ -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) => { diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md index e3373dbb80f..6f8de97e4fd 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md @@ -14,17 +14,17 @@ Erstelle eine vollständige JavaScript-Anwendung, die eine ähnliche Funktionali - Benutze unser Replit-Starterprojekt, 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) => diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md index a83721105af..dfc69159eb8 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md @@ -14,19 +14,19 @@ Erstelle eine vollständige JavaScript-Anwendung, die eine ähnliche Funktionali - Benutze unser Replit-Starter-Projekt, 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) => diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md index 95eba815db9..cbf78823d4d 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md @@ -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) => { diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md index fee61d9149b..923fed81fb0 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md @@ -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. diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md index cec91f7f57a..59d415ac909 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md @@ -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) => diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md index d6a37be7193..4c5940f82ae 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md @@ -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 SECRETS-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-- diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md index 55d34d6294c..8cd2fcd8043 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md @@ -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. diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md index a4a4d1872f2..aca652357d7 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md @@ -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) => diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md index 6663f7e6d84..1893dc3ab41 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md @@ -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. diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md index ffdeecdcf1e..9dff8adba92 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md @@ -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-- diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md index fad50448501..2b871513da0 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md @@ -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 Mongoose-Artikel an. diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md index 3f11daaa691..2232375577a 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md @@ -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. diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md index 830a13bb682..7cbfe8280fc 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md @@ -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-- diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md index e83fc0532cd..d25d263fd6a 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md @@ -14,23 +14,23 @@ Bei der Arbeit an diesen Aufgaben wirst du deinen Code mithilfe folgender Method - Benutze unser Replit-Starter-Projekt, 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 this tutorial to set up a hosted database on MongoDB Atlas. +Folge diesem Tutorial, 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 SECRETS tab to add the variable. Do not surround the values with quotes when using the SECRETS tab. +**Hinweis:** Wenn du Replit nutzt, kannst du keine `.env`-Datei erstellen. Verwende stattdessen den eingebauten SECRETS-Tab, um die Variable hinzuzufügen. Do not surround the values with quotes when using the SECRETS 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(, { 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(, { useNewUrlParser: true, useUnifiedTopology: true } ); ``` -"mongoose" should be connected to a database +"mongoose" sollte mit einer Datenbank verbunden sein ```js (getUserInput) => diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md index fe718a5c32d..2808cc76a3a 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md @@ -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-- diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md index 2654e4a1e8d..e4598017e9c 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md @@ -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-- diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md index 2a241be20f5..b1ead3e8a7e 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md @@ -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-- diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md index 09e390c1ac7..f0e86a8647f 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md @@ -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-- diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-strategies.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-strategies.md index f28e377c0a5..ce32f060c7c 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-strategies.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-strategies.md @@ -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 check out the project completed up to this point. +Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. Wenn du auf Fehler stößt, kannst du das bis zu diesem Punkt abgeschlossene Projekt überprüfen. # --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) => { diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md index f5487859d7b..7b03862dd0c 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md @@ -1,6 +1,6 @@ --- id: 589690e6f9fc0f352b528e6e -title: Clean Up Your Project with Modules +title: Ordne dein Projekt mit Modulen challengeType: 2 forumTopicId: 301549 dashedName: clean-up-your-project-with-modules @@ -8,7 +8,7 @@ dashedName: clean-up-your-project-with-modules # --description-- -Right now, everything you have is in your `server.js` file. This can lead to hard to manage code that isn't very expandable. Erstelle 2 neue Dateien: `routes.js` und `auth.js` +Im Moment ist alles, was du hast, in deiner `server.js`-Datei. Dies kann dazu führen, dass der Code schwer zu verwalten und nicht erweiterbar ist. Erstelle 2 neue Dateien: `routes.js` und `auth.js` Beide sollten mit folgendem Code beginnen: @@ -18,9 +18,9 @@ module.exports = function (app, myDataBase) { } ``` -Now, in the top of your server file, require these files like so: `const routes = require('./routes.js');` Right after you establish a successful connection with the database, instantiate each of them like so: `routes(app, myDataBase)` +In der obersten Datei deines Servers musst du diese Dateien wie folgt angeben: `const routes = require('./routes.js');` Nachdem du eine erfolgreiche Verbindung mit der Datenbank hergestellt hast, instanziiere jede dieser Dateien wie folgt: `routes(app, myDataBase)` -Finally, take all of the routes in your server and paste them into your new files, and remove them from your server file. Also take the `ensureAuthenticated` function, since it was specifically created for routing. Now, you will have to correctly add the dependencies in which are used, such as `const passport = require('passport');`, at the very top, above the export line in your `routes.js` file. +Schließlich füge jeden Pfad auf deinem Server in die neuen Dateien ein und entfernen sie aus der Serverdatei. Verwende die Funktion `ensureAuthenticated`, da sie speziell für das Routing entwickelt wurde. Jetzt musst du die Abhängigkeiten korrekt hinzufügen, in denen verwendet wird, wie zum Beispiel `const passport = require('passport');`, ganz oben, oberhalb der Exportlinie in deinen `routes.js` Datei. Keep adding them until no more errors exist, and your server file no longer has any routing (**except for the route in the catch block**)! diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md index cf430bfc04e..2f12f7adbc3 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md @@ -10,7 +10,7 @@ dashedName: handle-a-disconnect Du wirst vielleicht feststellen, dass du bisher nur die Anzahl der Nutzer erhöht hast. Das Verarbeiten eines Verbindungsabbruchs des Nutzers ist genauso einfach, wie das Verarbeiten des ersten Verbindungsaufbaus – nur musst du hierfür, statt auf dem gesamten Server, auf jeden Socket hören. -To do this, add another listener inside the existing `'connect'` listener that listens for `'disconnect'` on the socket with no data passed through. You can test this functionality by just logging that a user has disconnected to the console. +Füge zu diesem Zweck dem bestehenden `'connect'`-Listener einen weiteren Listener hinzu, der auf `'disconnect'`-Ereignisse des Sockets wartet, ohne dass Daten durchgelassen werden. You can test this functionality by just logging that a user has disconnected to the console. ```js socket.on('disconnect', () => { @@ -22,7 +22,7 @@ Um sicherzustellen, dass Clients immer über aktuelle Nutzerzahlen verfügen, so **Hinweis:** Wie bei `'disconnect'` sollten auch alle anderen Ereignisse, die ein Socket an den Server übertragen kann, innerhalb des Verbindungsaufbau-Listeners verarbeitet werden, in welchem wir 'socket' definiert haben. -Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. If you're running into errors, you can check out the project completed up to this point. +Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. Wenn du auf Fehler stößt, kannst du das bis zu diesem Punkt abgeschlossene Projekt überprüfen. # --hints-- diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md index a93f9dcef2a..d4dc8242213 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md @@ -8,19 +8,19 @@ dashedName: how-to-use-passport-strategies # --description-- -In the `index.pug` file supplied, there is a login form. It is hidden because of the inline JavaScript `if showLogin` with the form indented after it. +In the `index.pug` file supplied, there is a login form. Es wird durch das Inline-JavaScript `if showLogin` ausgeblendet, wobei das Formular hinten eingerückt wird. Füge innerhalb des `res.render` dieser Seite dem Objekt eine neue Variable hinzu, `showLogin: true`. Wenn du deine Seite aktualisierst, solltest du das Formular sehen! Das Formular übermittelt **POST**-Anfragen an `/login`. Hier solltest du also die POST-Anfrage annehmen und den Nutzer authentifizieren. In dieser Aufgabe erstellst du die Route `/login`, um eine POST-Anfrage anzunehmen. Um mithilfe dieser Route Nutzer zu authentifizieren, benötigst du eine Middleware, die das vor Beantwortung der Anfrage tut. Dazu wird einfach ein weiteres Argument an die Middleware übergeben, bevor die Antwort kommt. The middleware to use is `passport.authenticate('local')`. -`passport.authenticate` can also take some options as an argument such as `{ failureRedirect: '/' }` which is incredibly useful, so be sure to add that in as well. Add a response after using the middleware (which will only be called if the authentication middleware passes) that redirects the user to `/profile`. Add that route, as well, and make it render the view `profile.pug`. +`passport.authenticate` kann auch einige Optionen als Argument akzeptieren, wie z.B. `{ failureRedirect: '/' }`, was unglaublich nützlich ist, also füge auch das hinzu. Füge nach der Verwendung der Middleware eine Antwort hinzu (die nur aufgerufen wird, wenn die Authentifizierungs-Middleware funktioniert), die den Benutzer zu `/profile` umleitet. Fügen diese Route ebenfalls hinzu und lasse sie die Ansicht `profile.pug` rendern. -If the authentication was successful, the user object will be saved in `req.user`. +Wenn die Authentifizierung erfolgreich war, wird das Benutzerobjekt in `req.user` gespeichert. -At this point, if you enter a username and password in the form, it should redirect to the home page `/`, and the console of your server should display `'User {USERNAME} attempted to log in.'`, since we currently cannot login a user who isn't registered. +Wenn du zu diesem Zeitpunkt einen Benutzernamen und ein Passwort in das Formular eingibst, sollte es auf die Startseite `/` umleiten und die Konsole deines Servers sollte `'User {USERNAME} attempted to log in.'` anzeigen, da wir derzeit keinen Benutzer anmelden können, der nicht registriert ist. -Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. If you're running into errors, you can check out the project completed up to this point. +Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. Wenn du auf Fehler stößt, kannst du das bis zu diesem Punkt abgeschlossene Projekt überprüfen. # --hints-- diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md index 2802fdffae2..d7908beb67d 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md @@ -39,7 +39,7 @@ myDataBase.findOneAndUpdate( ); ``` -`findOneAndUpdate` ermöglicht es dir, nach einem Objekt zu suchen und es zu aktualisieren. Wenn das Objekt nicht existiert, wird es eingefügt und der Callback-Funktion zur Verfügung gestellt. In this example, we always set `last_login`, increment the `login_count` by `1`, and only populate the majority of the fields when a new object (new user) is inserted. Notice the use of default values. Manchmal ist ein übermitteltes Profil nicht vollständig ausgefüllt oder der Nutzer hält es privat. In diesem Fall verarbeitest du es, um einen Fehler zu vermeiden. +`findOneAndUpdate` ermöglicht es dir, nach einem Objekt zu suchen und es zu aktualisieren. Wenn das Objekt nicht existiert, wird es eingefügt und der Callback-Funktion zur Verfügung gestellt. In this example, we always set `last_login`, increment the `login_count` by `1`, and only populate the majority of the fields when a new object (new user) is inserted. Beachte, die Verwendung von Standardwerten. Manchmal ist ein übermitteltes Profil nicht vollständig ausgefüllt oder der Nutzer hält es privat. In diesem Fall verarbeitest du es, um einen Fehler zu vermeiden. Du solltest dich jetzt bei deiner App anmelden können. Versuch es! diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md index 6a37ff41580..2b88d484697 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md @@ -8,7 +8,7 @@ dashedName: registration-of-new-users # --description-- -Jetzt musst du einem neuen Nutzer deiner Webseite erlauben, ein Konto zu erstellen. In the `res.render` for the home page add a new variable to the object passed along - `showRegistration: true`. When you refresh your page, you should then see the registration form that was already created in your `index.pug` file. This form is set up to **POST** on `/register`, so create that route and have it add the user object to the database by following the logic below. +Jetzt musst du einem neuen Nutzer deiner Webseite erlauben, ein Konto zu erstellen. In the `res.render` for the home page add a new variable to the object passed along - `showRegistration: true`. Wenn du deine Seite aktualisierst, solltest du das Registrierungsformular sehen, das bereits in deiner `index.pug`-Datei erstellt wurde. This form is set up to **POST** on `/register`, so create that route and have it add the user object to the database by following the logic below. The logic of the registration route should be as follows: @@ -56,7 +56,7 @@ app.route('/register') ); ``` -Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. If you're running into errors, you can check out the project completed up to this point. +Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. Wenn du auf Fehler stößt, kannst du das bis zu diesem Punkt abgeschlossene Projekt überprüfen. **HINWEIS:** Ab jetzt können Probleme im Zusammenhang mit der Verwendung des *picture-in-picture*-Browsers auftreten. Wenn du eine Online-IDE verwendest, die eine Vorschau der Anwendung innerhalb des Editors bietet, wird empfohlen, diese Vorschau in einem neuen Tab zu öffnen. diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md index 4ae01537d7c..f902c1e028c 100644 --- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md @@ -10,20 +10,20 @@ dashedName: serialization-of-a-user-object Serialisierung und Deserialisierung sind wichtige Konzepte der Authentifizierung. Ein Objekt zu serialisieren bedeutet, dessen Inhalt in einen kleinen *key* zu konvertieren, welcher dann in das Originalobjekt deserialisiert werden kann. Auf diese Weise können wir wissen, wer mit dem Server kommuniziert hat, ohne dabei Authentifizierungsdaten wie Nutzernamen und Passwort für jeden Seitenaufruf übertragen zu müssen. -To set this up properly, you need to have a serialize function and a deserialize function. In Passport, these can be created with: +Um dies richtig einzurichten, musst du eine Serialisierungsfunktion und eine Deserialisierungsfunktion haben. In Passport können diese mit erstellt werden: ```javascript passport.serializeUser(cb); passport.deserializeUser(cb); ``` -The callback function passed to `serializeUser` is called with two arguments: the full user object, and a callback used by passport. +Die Callback-Funktion, die an `serializeUser` übergeben wird, wird mit zwei Argumenten aufgerufen: dem vollständigen Benutzerobjekt und einem von Passport verwendeten Callback. -The callback expects two arguments: An error, if any, and a unique key to identify the user that should be returned in the callback. You will use the user's `_id` in the object. This is guaranteed to be unique, as it is generated by MongoDB. +Der Callback erwartet zwei Argumente: Einen Fehler, falls vorhanden, und einen eindeutigen Schlüssel zur Identifizierung des Benutzers, der im Callback zurückgegeben werden soll. Du wirst die `_id` des Benutzers in dem Objekt verwenden. Diese ist garantiert eindeutig, da sie von MongoDB generiert wird. -Similarly, `deserializeUser` is called with two arguments: the unique key, and a callback function. +In ähnlicher Weise wird `deserializeUser` mit zwei Argumenten aufgerufen: dem eindeutigen Schlüssel und einer Callback-Funktion. -This callback expects two arguments: An error, if any, and the full user object. To get the full user object, make a query search for a Mongo `_id`, as shown below: +Dieser Callback erwartet zwei Argumente: Einen Fehler, falls vorhanden, und das vollständige Benutzerobjekt. Um das vollständige Benutzerobjekt zu erhalten, suchst du mit einer Abfrage nach einer Mongo `_id`, wie unten gezeigt: ```javascript @@ -38,15 +38,15 @@ passport.deserializeUser((id, done) => { }); ``` -Add the two functions above to your server. The `ObjectID` class comes from the `mongodb` package. `mongodb@~3.6.0` has already been added as a dependency. Declare this class with: +Füge die beiden oben genannten Funktionen zu deinem Server hinzu. Die `ObjectID`-Klasse stammt aus dem `mongodb`-Paket. `mongodb@~3.6.0` ist bereits als Abhängigkeit hinzugefügt worden. Deklariere diese Klasse mit: ```javascript const { ObjectID } = require('mongodb'); ``` -The `deserializeUser` will throw an error until you set up the database connection. So, for now, comment out the `myDatabase.findOne` call, and just call `done(null, null)` in the `deserializeUser` callback function. +Der `deserializeUser` wird einen Fehler auslösen, bis du die Datenbankverbindung eingerichtet hast. Kommentiere also den `myDatabase.findOne` Aufruf ab und rufe einfach `done(null, null)` in der `deserializeUser` Callback-Funktion auf. -Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. If you're running into errors, you can check out the project completed up to this point. +Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. Wenn du auf Fehler stößt, kannst du das bis zu diesem Punkt abgeschlossene Projekt überprüfen. # --hints-- @@ -90,7 +90,7 @@ async (getUserInput) => { } ``` -MongoDB should be a dependency. +MongoDB sollte eine Abhängigkeit sein. ```js async (getUserInput) => { @@ -105,7 +105,7 @@ async (getUserInput) => { } ``` -Mongodb should be properly required including the ObjectId. +Mongodb sollte ordnungsgemäß erforderlich sein, einschließlich der ObjectId. ```js async (getUserInput) => { diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md index ab890932084..137cf5f8211 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md @@ -1,6 +1,6 @@ --- id: 587d824c367417b2b2512c4c -title: Assert Deep Equality with .deepEqual and .notDeepEqual +title: Überprüfung der "Deep Equality" mit .deepEqual und .notDeepEqual challengeType: 2 forumTopicId: 301587 dashedName: assert-deep-equality-with--deepequal-and--notdeepequal @@ -8,17 +8,17 @@ dashedName: assert-deep-equality-with--deepequal-and--notdeepequal # --description-- -As a reminder, this project is being built upon the following starter project on Replit or cloned from GitHub. +Zur Erinnerung: Dieses Projekt ist auf dem folgenden Starterprojekt aufgebaut worden Replit, oder geklont aus GitHub. -`deepEqual()` asserts that two objects are deep equal. +`deepEqual()` besagt, dass zwei Objekte "deep equal" (völlig gleich) sind. # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#7` in the `Equality` suite, change each `assert` to either `assert.deepEqual` or `assert.notDeepEqual` to make the test pass (should evaluate to `true`). Die an die Asserts übergebenen Argumente dürfen nicht verändert werden. +Ändere innerhalb `tests/1_unit-tests.js` mit dem gekennzeichneten Test`#7` in der `Equality` Suite, jeden `assert`, zu `assert.deepEqual` oder `assert.notDeepEqual`, um den Test zu bestehen (sollte `true` ausgeben). Die an die Asserts übergebenen Argumente dürfen nicht verändert werden. # --hints-- -All tests should pass. +Alle Tests sollten bestehen. ```js (getUserInput) => @@ -32,7 +32,7 @@ All tests should pass. ); ``` -You should choose the correct method for the first assertion - `deepEqual` vs. `notDeepEqual`. +Du solltest die richtige Methode für die erste Behauptung wählen - `deepEqual` vs. `notDeepEqual`. ```js (getUserInput) => @@ -50,7 +50,7 @@ You should choose the correct method for the first assertion - `deepEqual` vs. ` ); ``` -You should choose the correct method for the second assertion - `deepEqual` vs. `notDeepEqual`. +Du solltest die richtige Methode für die zweite Behauptung wählen - `deepEqual` vs. `notDeepEqual`. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md index bae878a8002..e581339ae84 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md @@ -1,6 +1,6 @@ --- id: 587d824c367417b2b2512c4d -title: Compare the Properties of Two Elements +title: Vergleiche die Eigenschaften von zwei Elementen challengeType: 2 forumTopicId: 301588 dashedName: compare-the-properties-of-two-elements @@ -8,15 +8,15 @@ dashedName: compare-the-properties-of-two-elements # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Zur Erinnerung: Dieses Projekt baut auf dem folgenden Startprojekt bei Replit auf, oder kopiert von GitHub. # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#8` in the `Comparisons` suite, change each `assert` to either `assert.isAbove` or `assert.isAtMost` to make the test pass (should evaluate to `true`). Verändere die an die Asserts übergebenen Argumente nicht. +Passe innerhalb `tests/1_unit-tests.js` beim Test mit der Beschriftung `#8` in der `Comparisons`-Suite jedes `assert` entweder zu `assert.isAbove` an oder zu `assert.isAtMost`, damit der Test durchläuft (er sollte mit `true` ausgewertet werden). Verändere die an die Asserts übergebenen Argumente nicht. # --hints-- -All tests should pass. +Alle Tests sollten durchlaufen. ```js (getUserInput) => @@ -30,7 +30,7 @@ All tests should pass. ); ``` -You should choose the correct method for the first assertion - `isAbove` vs. `isAtMost`. +Du solltest die richtige Methode für die erste Assertion wählen - `isAbove` vs. `isAtMost`. ```js (getUserInput) => @@ -48,7 +48,7 @@ You should choose the correct method for the first assertion - `isAbove` vs. `is ); ``` -You should choose the correct method for the second assertion - `isAbove` vs. `isAtMost`. +Du solltest die richtige Methode für die zweite Assertion wählen - `isAbove` vs. `isAtMost`. ```js (getUserInput) => @@ -62,7 +62,7 @@ You should choose the correct method for the second assertion - `isAbove` vs. `i ); ``` -You should choose the correct method for the third assertion - `isAbove` vs. `isAtMost`. +Du solltest die richtige Methode für die dritte Assertion wählen - `isAbove` vs. `isAtMost`. ```js (getUserInput) => @@ -80,7 +80,7 @@ You should choose the correct method for the third assertion - `isAbove` vs. `is ); ``` -You should choose the correct method for the fourth assertion - `isAbove` vs. `isAtMost`. +Du solltest die richtige Methode für die vierte Assertion wählen - `isAbove` vs. `isAtMost`. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md index fa59cc907c8..6bec0f565ad 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md @@ -1,6 +1,6 @@ --- id: 587d824a367417b2b2512c46 -title: Learn How JavaScript Assertions Work +title: Lerne, wie JavaScript Assertions funktionieren challengeType: 2 forumTopicId: 301589 dashedName: learn-how-javascript-assertions-work @@ -14,21 +14,21 @@ Bei der Arbeit an diesen Aufgaben wirst du deinen Code mithilfe folgender Method - Verwende unser Replit Starterprojekt um diese Aufgaben 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, 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 mit dem Importieren des Projekts in Replit. +- Daraufhin wird ein `.replit`-Fenster angezeigt. +- Wähle `Use run command` 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. +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. # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#1` in the `Basic Assertions` suite, change each `assert` to either `assert.isNull` or `assert.isNotNull` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +Ändere innerhalb `tests/1_unit-tests.js` unter dem Test mit dem Label `#1` in der `Basic Assertions`-Suite jeden `assert` zu entweder `assert.isNull` oder `assert.isNotNull`, um den Test zu bestehen (sollte `true` ausgeben). Die an die Asserts übergebenen Argumente dürfen nicht verändert werden. # --hints-- -All tests should pass. +Alle Tests sollten erfolgreich sein. ```js (getUserInput) => @@ -42,7 +42,7 @@ All tests should pass. ); ``` -You should choose the correct method for the first assertion - `isNull` vs. `isNotNull`. +Du solltest die richtige Methode für die erste Behauptung wählen - `isNull` vs. `isNotNull`. ```js (getUserInput) => @@ -56,7 +56,7 @@ You should choose the correct method for the first assertion - `isNull` vs. `isN ); ``` -You should choose the correct method for the second assertion - `isNull` vs. `isNotNull`. +Du solltest die richtige Methode für die zweite Behauptung wählen - `isNull` vs. `isNotNull`. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md index dbd38f34359..9804c2dec16 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md @@ -42,13 +42,13 @@ Die Tests, die ausgeführt werden, sobald du den Link zu deinem Projekt einreich # --instructions-- -Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with no name'` test (`// #1`) to assert the `status` and the `text` of the response to make the test pass. Do not alter the arguments passed to the asserts. +Ändere in `tests/2_functional-tests.js` den `'Test GET /hello with no name'`-Test (`// #1`), um den `status` und den `text` der Antwort geltend zu machen, damit der Test erfolgreich abgeschlossen wird. Verändere die an die Asserts übergebenen Argumente nicht. -There should be no URL query. Without a name URL query, the endpoint responds with `hello Guest`. +Es sollte keine URL-Query existieren. Ohne eine Namens-URL-Query antwortet der Endpunkt mit `hello Guest`. # --hints-- -All tests should pass +Alle Tests sollten bestehen ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md index ba16bc80f9f..e72b828d9f8 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md @@ -8,7 +8,7 @@ dashedName: run-functional-tests-using-a-headless-browser # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Zur Erinnerung: Dieses Projekt baut auf dem folgenden Starterprojekt auf Replit, oder wird von GitHub geklont. Auf der Seite befindet sich ein Eingabeformular. Es sendet Daten an den `PUT /travellers` Endpunkt als AJAX Anfrage. @@ -30,29 +30,29 @@ test('Submit the surname "Polo" in the HTML form', function (done) { }); ``` -First, the `fill` method of the `browser` object fills the `surname` field of the form with the value `'Polo'`. `fill` returns a promise, so `then` is chained off of it. +Als Erstes die `fill` Methode von dem `browser` Objekt - diese füllt das `surname` Feld des Formulars mit dem Wert `'Polo'` aus. `fill` gibt ein Versprechen zurück, und somit wird `then` davon entkettet. -Within the `then` callback, the `pressButton` method of the `browser` object is used to invoke the form's `submit` event listener. Die `pressButton`-Methode ist asynchron. +Innerhalb des `then` Callbacks, wird die `pressButton` Methode des `browser` Objekts dazu verwendet, um den `submit`-Ereignis-Listener des Formulars aufzurufen. Die `pressButton`-Methode ist asynchron. -Then, once a response is received from the AJAX request, a few assertions are made confirming: +Sobald eine Antwort von der AJAX-Anfrage empfangen wird, werden einige Behauptungen zur Bestätigung aufgestellt: 1. Der Status der Antwort ist `200` 2. Der Text innerhalb des `` Elements entspricht `'Marco'` 3. Der Text innerhalb des `` Elements entspricht `'Polo'` -4. There is `1` `` element. +4. Es gibt `1` ``-Element. Schließlich wird der `done` Callback aufgerufen, der aufgrund des asynchronen Tests benötigt wird. # --instructions-- -Within `tests/2_functional-tests.js`, in the `'Submit the surname "Colombo" in the HTML form'` test (`// #5`), automate the following: +Automatisiere Folgendes innerhalb `tests/2_functional-tests.js`, in dem `'Submit the surname "Colombo" in the HTML form'` Test (`// #5`): 1. Fülle das Formular mit dem Nachnamen `Colombo` aus 2. Klicke auf den "Bestätigen" Button Und innerhalb des `pressButton` Callback: -1. Assert that status is OK `200` +1. Prüfen ob der Status `200` OK ist 2. Prüfe, ob der Text innerhalb des Elements `span#name` `'Cristoforo'` ist 3. Prüfe, ob der Text innerhalb des Elements `span#surname` `'Colombo'` ist 4. Überprüfe, ob das/die Element(e) `span#dates` existieren und deren Zahl `1` ist diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md index b79d550bef5..d95e9a2e6d1 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md @@ -1,6 +1,6 @@ --- id: 587d824e367417b2b2512c55 -title: Test if an Object has a Property +title: Teste, ob ein Objekt über eine Eigenschaft verfügt challengeType: 2 forumTopicId: 301604 dashedName: test-if-an-object-has-a-property @@ -8,13 +8,13 @@ dashedName: test-if-an-object-has-a-property # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Zur Erinnerung: Dieses Projekt baut auf dem folgenden Startprojekt aufrepliziert, oder geklont vonGitHub. `property` asserts that the actual object has a given property. # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#16` in the `Objects` suite, change each `assert` to either `assert.property` or `assert.notProperty` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +Within `tests/1_unit-tests.js` under the test labelled `#16` in the `Objects` suite, change each `assert` to either `assert.property` or `assert.notProperty` to make the test pass (should evaluate to `true`). Ändere nicht die Argumente, die an die Assertions übergeben werden. # --hints-- diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md index 78922b1db6f..660052d8b8a 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md @@ -1,6 +1,6 @@ --- id: 587d824e367417b2b2512c57 -title: Test if an Object is an Instance of a Constructor +title: Teste, ob ein Objekt eine Instanz eines Konstruktors ist challengeType: 2 forumTopicId: 301605 dashedName: test-if-an-object-is-an-instance-of-a-constructor @@ -14,7 +14,7 @@ As a reminder, this project is being built upon the following starter project on # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#18` in the `Objects` suite, change each `assert` to either `assert.instanceOf` or `assert.notInstanceOf` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +Within `tests/1_unit-tests.js` under the test labelled `#18` in the `Objects` suite, change each `assert` to either `assert.instanceOf` or `assert.notInstanceOf` to make the test pass (should evaluate to `true`). Die an die Asserts übergebenen Argumente dürfen nicht verändert werden. # --hints-- @@ -50,7 +50,7 @@ You should choose the correct method for the first assertion - `instanceOf` vs. ); ``` -You should choose the correct method for the second assertion - `instanceOf` vs. `notInstanceOf`. +Du solltest die richtige Methode für die zweite Behauptung wählen - `instanceOf` vs. `notInstanceOf`. ```js (getUserInput) => diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md index 99c00bc8543..82210167b91 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md @@ -1,6 +1,6 @@ --- id: 587d824c367417b2b2512c4e -title: Test if One Value is Below or At Least as Large as Another +title: Teste, ob ein Wert unter oder mindestens so groß ist wie ein anderer challengeType: 2 forumTopicId: 301606 dashedName: test-if-one-value-is-below-or-at-least-as-large-as-another @@ -12,7 +12,7 @@ As a reminder, this project is being built upon the following starter project on # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#9` in the `Comparisons` suite, change each `assert` to either `assert.isBelow` or `assert.isAtLeast` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +Within `tests/1_unit-tests.js` under the test labelled `#9` in the `Comparisons` suite, change each `assert` to either `assert.isBelow` or `assert.isAtLeast` to make the test pass (should evaluate to `true`). Die an die Asserts übergebenen Argumente dürfen nicht verändert werden. # --hints-- diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md index 388866c3e0c..265d421f4d0 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md @@ -8,7 +8,7 @@ dashedName: use-assert-isok-and-assert-isnotok # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Zur Erinnerung: Dieses Projekt baut auf dem folgenden Startprojekt aufrepliziertoder geklont vonGitHub. `isOk()` will test for a truthy value, and `isNotOk()` will test for a falsy value. @@ -16,7 +16,7 @@ To learn more about truthy and falsy values, try our { @@ -233,7 +233,7 @@ async (getUserInput) => { }; ``` -If `locale` does not match one of the two specified locales, return `{ error: 'Invalid value for locale field' }`. +Wenn `locale` mit keiner der beiden angegebenen Sprachumgebungen übereinstimmt, wird `{ error: 'Invalid value for locale field' }` zurückgegeben. ```js async (getUserInput) => { @@ -255,7 +255,7 @@ async (getUserInput) => { }; ``` -If `text` requires no translation, return `"Everything looks good to me!"` for the `translation` value. +Wenn `text` keine Übersetzung erfordert, wird `"Everything looks good to me!"` als `translation`-Wert zurückgegeben. ```js async (getUserInput) => { diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/issue-tracker.md index 20a1584cd78..7e7e0f9fcf7 100644 --- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/issue-tracker.md +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/issue-tracker.md @@ -14,23 +14,23 @@ Erstelle eine vollständige JavaScript-Anwendung, die eine ähnliche Funktionali - Verwende dieses Replit-Starterprojekt, 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, folge diesen Schritten, um das Projekt einzurichten: -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. +- Beginne mit dem Importieren des Projekts in Replit. +- Daraufhin wird ein `.replit`-Fenster angezeigt. - Select `Use run command` and click the `Done` button. -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. 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. # --instructions-- -- Complete the necessary routes in `/routes/api.js` -- Create all of the functional tests in `tests/2_functional-tests.js` -- Copy the `sample.env` file to `.env` and set the variables appropriately +- Ergänze die notwendigen Routen in `/routes/api.js` +- Erstelle alle Funktionstests in `tests/2_functional-tests.js` +- Kopiere die `sample.env`-Datei nach `.env` und setze die Variablen entsprechend - To run the tests uncomment `NODE_ENV=test` in your `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- Um die Tests in der Konsole auszuführen, verwende den Befehl `npm run test`. Um die Replit-Konsole zu öffnen, drückst du Strg+Umschalt+P (Cmd auf einem Mac) und gibst "open shell" ein -Write the following tests in `tests/2_functional-tests.js`: +Schreibe die folgenden Tests in `tests/2_functional-tests.js`: - Create an issue with every field: POST request to `/api/issues/{project}` - Create an issue with only required fields: POST request to `/api/issues/{project}` @@ -79,7 +79,7 @@ async (getUserInput) => { }; ``` -The `POST` request to `/api/issues/{projectname}` will return the created object, and must include all of the submitted fields. Excluded optional fields will be returned as empty strings. Füge außerdem `created_on` (Datum/Uhrzeit), `updated_on` (Datum/Uhrzeit), `open` (Boolean, `true` für offen - Standardwert, `false` für geschlossen) sowie `_id` hinzu. +The `POST` request to `/api/issues/{projectname}` will return the created object, and must include all of the submitted fields. Ausgeschlossene optionale Felder werden als leere Zeichenketten zurückgegeben. Füge außerdem `created_on` (Datum/Uhrzeit), `updated_on` (Datum/Uhrzeit), `open` (Boolean, `true` für offen - Standardwert, `false` für geschlossen) sowie `_id` hinzu. ```js async (getUserInput) => { @@ -113,7 +113,7 @@ async (getUserInput) => { }; ``` -If you send a `POST` request to `/api/issues/{projectname}` without the required fields, returned will be the error `{ error: 'required field(s) missing' }` +Wenn du eine `POST`-Anfrage an `/api/issues/{projectname}` ohne die erforderlichen Felder sendest, wird der Fehler `{ error: 'required field(s) missing' }` zurückgegeben ```js async (getUserInput) => { @@ -178,7 +178,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/issues/{projectname}` and filter the request by also passing along any field and value as a URL query (ie. `/api/issues/{project}?open=false`). You can pass one or more field/value pairs at once. +You can send a `GET` request to `/api/issues/{projectname}` and filter the request by also passing along any field and value as a URL query (ie. `/api/issues/{project}?open=false`). Du kannst ein oder mehrere Feld/Wert-Paare auf einmal übergeben. ```js async (getUserInput) => { @@ -342,7 +342,7 @@ async (getUserInput) => { }; ``` -All 14 functional tests are complete and passing. +Alle 14 Funktionstests sind abgeschlossen und bestanden. ```js async (getUserInput) => { diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md b/curriculum/challenges/german/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md index cf7f654ef83..3ec6b24a2e3 100644 --- a/curriculum/challenges/german/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md +++ b/curriculum/challenges/german/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md @@ -22,7 +22,7 @@ Vervollständige die `Category`-Klasse in `budget.py`. Es sollte in der Lage sei - Eine `deposit`-Methode, die einen Betrag und eine Beschreibung annimmt. Wenn keine Beschreibung angegeben wird, sollte standardmäßig eine leere Zeichenfolge ausgegeben werden. Die Methode sollte ein Objekt in Form von `{"amount": amount, "description": description}` an die Ledgerliste anhängen. - Eine `withdraw`-Methode, die der `deposit`-Methode ähnelt, bei der der übergebene Betrag jedoch als negative Zahl im Hauptbuch gespeichert werden soll. Wenn die Mittel nicht ausreichen, sollte nichts in das Hauptbuch eingetragen werden. Diese Methode sollte `True` zurückgeben, wenn die Auszahlung stattgefunden hat, ansonsten sollte sie `False` ausgeben. - Eine `get_balance`-Methode, die den aktuellen Saldo der Kategorie des Budgets auf der Grundlage der erfolgten Einzahlungen und Abhebungen zurückgibt. -- Eine `transfer`-Methode, die einen Betrag und eine andere Budgetkategorie als Argument akzeptiert. Die Methode sollte eine Entnahme mit dem Betrag und der Beschreibung "Transfer to [Destination Budget Category]" hinzufügen. Die Methode sollte dann eine Einzahlung in die andere Budgetkategorie mit dem Betrag und der Beschreibung "Übertragung von [Source Budget Category]" hinzufügen. Wenn nicht genügend Mittel vorhanden sind, sollte in keinem der beiden Hauptbücher etwas hinzugefügt werden. This method should return `True` if the transfer took place, and `False` otherwise. +- Eine `transfer`-Methode, die einen Betrag und eine andere Budgetkategorie als Argument akzeptiert. Die Methode sollte eine Entnahme mit dem Betrag und der Beschreibung "Transfer to [Destination Budget Category]" hinzufügen. Die Methode sollte dann eine Einzahlung in die andere Budgetkategorie mit dem Betrag und der Beschreibung "Übertragung von [Source Budget Category]" hinzufügen. Wenn nicht genügend Mittel vorhanden sind, sollte in keinem der beiden Hauptbücher etwas hinzugefügt werden. Diese Methode sollte `True` zurückgeben, wenn die Übertragung bereits stattgefunden hat, andernfalls sollte sie `False` zurückgeben. - Eine `check_funds`-Methode, die einen Betrag als Argument akzeptiert. Es wird `False` zurückgegeben, wenn der Betrag größer ist als der Saldo der Budgetkategorie, ansonsten wird `True` zurückgegeben. Diese Methode sollte sowohl von der Methode `withdraw` als auch von der Methode `transfer` verwendet werden. Wenn das Budgetobjekt ausgegeben wird, sollte es folgendes anzeigen: diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md b/curriculum/challenges/german/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md index 5273e4e153f..92786c07e1d 100644 --- a/curriculum/challenges/german/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md +++ b/curriculum/challenges/german/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md @@ -36,7 +36,7 @@ Die `Hat`-Klasse sollte eine `draw`-Methode haben, die ein Argument akzeptiert, Erstelle nun eine `experiment`-Funktion in `prob_calculator.py` (nicht innerhalb der `Hat`-Klasse). Diese Funktion sollte die folgenden Argumente akzeptieren: - `hat`: Ein Hut-Objekt, das Bälle enthält, das innerhalb der Funktion kopiert werden soll. -- `expected_balls`: Ein Objekt, das die genaue Gruppe von Bällen angibt, die für das Experiment aus dem Hut gezogen werden sollen. For example, to determine the probability of drawing 2 blue balls and 1 red ball from the hat, set `expected_balls` to `{"blue":2, "red":1}`. +- `expected_balls`: Ein Objekt, das die genaue Gruppe von Bällen angibt, die für das Experiment aus dem Hut gezogen werden sollen. Setze zum Beispiel `expected_balls` auf `{"blue":2, "red":1}`, um die Wahrscheinlichkeit zu bestimmen, dass 2 blaue Kugeln und 1 rote Kugel aus dem Hut gezogen werden. - `num_balls_drawn`: Die Anzahl der Bälle, die in jedem Experiment aus dem Hut gezogen werden sollen. - `num_experiments`: Die Anzahl der durchzuführenden Experimente. (Je mehr Experimente durchgeführt werden, desto genauer wird die ungefähre Wahrscheinlichkeit sein.) diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md index 208c51d58e3..dcfe6651c1c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md @@ -7,7 +7,7 @@ dashedName: step-68 # --description-- -Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans. +Ändere die Hintergrundfarbe des `hr`-Elements in `brown`, damit sie zur Farbe der Kaffeebohnen passt. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md index a4d06340296..e4ff4a11658 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md @@ -26,7 +26,7 @@ Du solltest die `color`-Eigenschaft auf `black` setzen. const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black'); ``` -Your `a` element should have a `color` of `black`. +Dein `a`-Element sollte eine `color`-Eigenschaft mit dem Wert `black` haben. ```js const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md index 1eaca873ffa..64ac53e9786 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md @@ -7,7 +7,7 @@ dashedName: step-86 # --description-- -Jetzt sieht der obere Abstand gut aus. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element. +Jetzt sieht der obere Abstand gut aus. Der Abstand unterhalb der Adresse unten in der Speisekarte ist etwas größer als der Platz oben in der Karte und im `h1`-Element. Um den Standard-Abstand unter des Adress-Elements `p` zu verringern, erstelle einen Klassenselektor mit dem Namen `address` und verwende den Wert `5px` für die `margin-bottom`-Eigenschaft. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md index a1f44c78e8f..46257885545 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md @@ -7,7 +7,7 @@ dashedName: step-77 # --description-- -Als Nächstes wirst du das `footer`-Element formatieren. To keep the CSS organized, add a comment at the end of `styles.css` with the text `FOOTER`. +Als Nächstes wirst du das `footer`-Element formatieren. Um das CSS zu organisieren, füge einen Kommentar am Ende von `styles.css` mit dem Text `FOOTER` hinzu. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md index 9e83d31daca..7b4fdb9a6bf 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md @@ -7,7 +7,7 @@ dashedName: step-76 # --description-- -Now add the `bottom-line` class to the second `hr` element so the styling is applied. +Füge nun die `bottom-line`-Klasse zum zweiten `hr`-Element hinzu, damit die Formatierung angewandt wird. # --hints-- @@ -17,7 +17,7 @@ You should add the `class` attribute with the value `bottom-line`. assert(code.match(/class=('|")bottom-line\1/i)); ``` -Your `bottom-line` class should be applied to your second `hr` element. +Deine `bottom-line`-Klasse sollte auf dein zweites `hr`-Element angewandt werden. ```js assert($('hr')[1].className === 'bottom-line'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md index 90ffe3835b6..7f41e82b102 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md @@ -7,7 +7,7 @@ dashedName: step-44 # --description-- -To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements. +Um das Format zu vervollständigen, fügst du die entsprechenden Klassennamen `flavor` und `price` zu allen verbleibenden `p`-Elementen hinzu. # --hints-- @@ -23,7 +23,7 @@ Du solltest fünf `.price`-Elemente haben. assert($('.price').length === 5); ``` -Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`. +Deine `.flavor`-Elemente sollten deinen `p`-Elementen mit dem Text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, und `Mocha` entsprechen. ```js const p = $('p'); @@ -35,7 +35,7 @@ assert(p[7] === flavor[3]); assert(p[9] === flavor[4]); ``` -Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`. +Deine `.price`-Elemente sollten deinen `p`-Elementen mit dem Text `3.00`, `3.75`, `3.50`, `4.00`, und `4.50` entsprechen. ```js const p = $('p'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md index d5f3c55229e..5a9cceffc77 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md @@ -7,7 +7,7 @@ dashedName: step-34 # --description-- -Als Nächstes solltest du den Preis nach rechts ausrichten. Add a class named `price` to your `p` element that has `3.00` as its text. +Als Nächstes solltest du den Preis nach rechts ausrichten. Füge deinem `p`-Element eine Klasse namens `price` hinzu, die den Text `3.00` enhthält. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md index 9b506b8e5aa..2afcaab763b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md @@ -24,7 +24,7 @@ Dein `100%`-Selektor sollte nach deinem `0%`-Selektor stehen. assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%') ``` -Your `100%` selector should have a `transform` property set to `rotate(360deg)`. +Dein `100%`-Selektor sollte eine `transform`-Eigenschaft mit dem Wert auf `rotate(360deg)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)') diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md index 9520888b695..08da6b3aad9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md @@ -7,13 +7,13 @@ dashedName: step-20 # --description-- -The `animation-name` property is used to link a `@keyframes` rule to a CSS selector. Der Wert dieser Eigenschaft sollte mit dem Namen der `@keyframes`-Regel übereinstimmen. Give your `.wheel` selector an `animation-name` property set to `wheel`. +Die `animation-name`-Eigenschaft wird verwendet, um eine `@keyframes`-Regel mit einem CSS-Selektor zu verknüpfen. Der Wert dieser Eigenschaft sollte mit dem Namen der `@keyframes`-Regel übereinstimmen. Weise deinem `.wheel`-Selektor eine `animation-name`-Eigenschaft mit dem Wert `wheel` zu. -The `animation-duration` property is used to set how long the animation should sequence to complete. Die Zeit sollte entweder in Sekunden (`s`) oder Millisekunden (`ms`) angegeben werden. Die `animation-duration`-Eigenschaft deines `.wheel`-Selektors sollte `10s` betragen. +Die `animation-duration`-Eigenschaft wird verwendet, um festzulegen, wie lange die Animation bis zum Abschluss dauern soll. Die Zeit sollte entweder in Sekunden (`s`) oder Millisekunden (`ms`) angegeben werden. Die `animation-duration`-Eigenschaft deines `.wheel`-Selektors sollte `10s` betragen. # --hints-- -Your `.wheel` selector should have an `animation-name` property set to `wheel`. +Dein `.wheel`-Selektor sollte eine `animation-name`-Eigenschaft auf `wheel` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md index 909bf8ab66f..fd163935c2f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md @@ -7,19 +7,19 @@ dashedName: step-21 # --description-- -Die `animation-iteration-count`-Eigenschaft legt fest, wie oft deine Animation wiederholt werden soll. This can be set to a number, or to `infinite` to indefinitely repeat the animation. Your Ferris wheel should never stop, so set the `.wheel` selector to have an `animation-iteration-count` of `infinite`. +Die `animation-iteration-count`-Eigenschaft legt fest, wie oft deine Animation wiederholt werden soll. Das kann eine Zahl oder auch `infinite` sein, wenn man die Animation unendlich wiederholen möchte. Dein Ferris-Wheel sollte nie anhalten, deshalb setzt du die `animation-iteration-count` deines `.wheel`-Selektors auf `infinite`. -Die `animation-timing-function`-Eigenschaft legt fest, wie die Animation mit der Zeit verlaufen soll. There are a few different values for this property, but you want the Ferris wheel animation to run at the same rate from start to finish. Setze `animation-timing-function` innerhalb deines `.wheel`-Selektors auf `linear`. +Die `animation-timing-function`-Eigenschaft legt fest, wie die Animation mit der Zeit verlaufen soll. Es gibt ein paar verschiedene Werte für diese Eigenschaft, aber du willst, dass die Ferris-Wheel-Animation von Anfang bis Ende mit der gleichen Geschwindigkeit verläuft. Setze `animation-timing-function` innerhalb deines `.wheel`-Selektors auf `linear`. # --hints-- -Your `.wheel` selector should have an `animation-iteration-count` property set to `infinite`. +Dein `.wheel`-Selektor sollte eine `animation-iteration-count`-Eigenschaft mit dem Wert `infinite` enthalten. ```js assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite'); ``` -Your `.wheel` selector should have an `animation-timing-function` property set to `linear`. +Dein `.wheel`-Selektor sollte eine `animation-timing-function`-Eigenschaft auf `linear` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md index 1aa331506f2..82260fe7d38 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md @@ -7,7 +7,7 @@ dashedName: step-22 # --description-- -Create another `@keyframes` rule with the name `cabins`. Use the same properties as your `@keyframes wheel`, copying both the `0%` and `100%` rules, but set the `transform` property of the `100%` selector to `rotate(-360deg)`. +Erstelle eine weitere `@keyframes`-Regel mit dem Namen `cabins`. Verwende die gleichen Eigenschaften wie dein `@keyframes wheel`, kopiere sowohl die `0%` und `100%`-Regeln, aber setze die `transform`-Eigenschaft des `100%`-Selektors auf `rotate(-360deg)`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md index 54e7d465fd5..cc69f9b104e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md @@ -7,7 +7,7 @@ dashedName: step-23 # --description-- -Mit deinem `.wheel`-Selektor hast du vier verschiedene Eigenschaften erstellt, um deine Animation zu steuern. For your `.cabin` selector, you can use the `animation` property to set these all at once. +Mit deinem `.wheel`-Selektor hast du vier verschiedene Eigenschaften erstellt, um deine Animation zu steuern. Für deinen `.cabin`-Selektor kannst du die `animation`-Eigenschaft verwenden, um diese alle gleichzeitig festzulegen. Setze die `animation`-Eigenschaft der `.cabin`-Regel auf `cabins 10s linear infinite`. This will set the `animation-name`, `animation-duration`, `animation-timing-function`, and `animation-iteration-count` properties in that order. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md index 936e90e2049..2d0baa124d2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md @@ -7,7 +7,7 @@ dashedName: step-24 # --description-- -To make your cabin animation seem more like a natural swinging motion, you can use the `ease-in-out` timing function. This setting will tell the animation to start and end at a slower pace, but move more quickly in the middle of the cycle. +To make your cabin animation seem more like a natural swinging motion, you can use the `ease-in-out` timing function. Diese Einstellung weist der Animation an, mit langsamerem Tempo zu beginnen und zu enden, aber sich in der Mitte des Zyklus schneller zu bewegen. Replace `linear` to `ease-in-out` in the `.cabin` selector. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md index a42ca711c53..1272742870b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md @@ -7,7 +7,7 @@ dashedName: step-25 # --description-- -Du kannst `@keyframes`-Regeln verwenden, um mehr als nur die Transformation eines Elements zu steuern. In the `0%` selector of your `@keyframes cabins`, set the `background-color` to `yellow`. +Du kannst `@keyframes`-Regeln verwenden, um mehr als nur die Transformation eines Elements zu steuern. Setze im `0%`-Selektor deiner `@keyframes cabins` die `background-color` auf `yellow`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md index 97f879a7da4..f289b67fed6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md @@ -7,7 +7,7 @@ dashedName: step-26 # --description-- -Between the `0%` and `100%` selectors, add a `50%` selector. This will apply in the middle of the animation cycle. Set the `background-color` to `purple`. +Between the `0%` and `100%` selectors, add a `50%` selector. Dies wird in der Mitte des Animationszyklus angewandt. Setze die `background-color` auf `purple`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md index 5eda6491aef..ecaa677b217 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md @@ -9,23 +9,23 @@ dashedName: step-1 As you've seen in the previous projects, webpages should start with a `DOCTYPE html` declaration, followed by an `html` element. -Add a `DOCTYPE html` declaration at the top of the document, and an `html` element after that. Give the `html` element a `lang` attribute with `en` as its value. +Füge eine `DOCTYPE html`-Deklaration oben im Dokument und ein `html`-Element nach dieser hinzu. Gib dem `html`-Element ein `lang`-Attribut mit `en` als Wert. # --hints-- -Your code should contain the `DOCTYPE` reference. +Dein Code sollte die `DOCTYPE`-Referenz enthalten. ```js assert(code.match(/` after the type. assert(code.match(//gi)); ``` -Your `html` element should have an opening tag with a `lang` attribute of `en`. +Dein `html`-Element sollte ein öffnendes Tag mit einem `lang`-Attribut mit dem Wert `en` haben. ```js assert(code.match(//gi)); ``` -Your `html` element should have a closing tag. +Dein `html`-Element sollte ein schließendes Tag haben. ```js assert(code.match(/<\/html\s*>/gi)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md index d958fb5dd05..51d82b52b98 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md @@ -7,83 +7,83 @@ dashedName: step-2 # --description-- -Nest a `head` element within the `html` element. Just after the `head` element, add a `body` element. +Nest a `head` element within the `html` element. Füge nach dem `head`-Element ein `body`-Element hinzu. # --hints-- -You should have an opening `head` tag. +Du solltest ein öffnendes `head`-Tag haben. ```js assert(code.match(//i)); ``` -You should have a closing `head` tag. +Du solltest ein schließendes `head`-Tag haben. ```js assert(code.match(/<\/head\s*>/i)); ``` -You should have an opening `body` tag. +Du solltest ein öffnendes `body`-Tag haben. ```js assert(code.match(//i)); ``` -You should have a closing `body` tag. +Du solltest ein schließendes `body`-Tag haben. ```js assert(code.match(/<\/body\s*>/i)); ``` -There should only be one `head` opening tag. +Es sollte nur ein öffnendes `head`-Tag vorhanden sein. ```js assert(code.match(//ig).length === 1); ``` -There should only be one `head` closing tag. +Es sollte nur ein schließendes `head`-Tag geben. ```js assert(code.match(/<\/head\s*>/ig).length === 1); ``` -There should only be one `body` opening tag. +Es sollte nur ein öffnendes `body`-Tag geben. ```js assert(code.match(//ig).length === 1); ``` -There should only be one `body` closing tag. +Es sollte nur ein schließendes `body`-Tag geben. ```js assert(code.match(/<\/body\s*>/ig).length === 1); ``` -Your `head` element should be empty. +Dein `head`-Element sollte leer sein. ```js assert(code.match(/\s*<\/head\s*>/i)); ``` -Your `body` element should be empty. +Dein `body`-Element sollte leer sein. ```js assert(code.match(/\s*<\/body\s*>/i)); ``` -Your `body` element should be placed after your `head` element. +Dein `body`-Element sollte nach deinem `head`-Element stehen. ```js assert(code.match(/<\/head\s*>\s*/i)); ``` -Your `head` element should be within the `html` element. +Dein `head`-Element sollte sich innerhalb des `html`-Elements befinden. ```js assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); ``` -Your `body` element should be within the `html` element. +Dein `body`-Element sollte sich innerhalb des `html`-Elements befinden. ```js assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md index b032cadafd4..e657ceb7595 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md @@ -7,28 +7,28 @@ dashedName: step-3 # --description-- -Remember that the `title` element gives search engines extra information about the page. It also displays the content of that `title` element in two more ways: +Beachte, dass das `title`-Element den Suchmaschinen zusätzliche Informationen über die Seite gibt. It also displays the content of that `title` element in two more ways: * in the title bar when the page is open -* in the browser tab for the page when you hover on it. Even if that tab is not active, once you hover on the tab, the `title` text is displayed. +* in der Browser-Registerkarte für die Seite, wenn du mit dem Mauszeiger darüber fährst. Auch wenn dieses Tab nicht aktiv ist, wird der `title`-Text angezeigt, sobald du mit der Maus darüber fährst. -Within the `head` element, nest a `title` element with the text `Colored Markers`. +Niste innerhalb des `head`-Elements ein `title`-Element mit dem Text `Colored Markers`. # --hints-- -You should have an opening `title` tag. +Du solltest ein öffnendes `title`-Tag haben. ```js assert(code.match(//i)); ``` -You should have a closing `title` tag. +Du solltest ein schließendes `title`-Tag haben. ```js assert(code.match(/<\/title\s*>/i)); ``` -Your project should have the title `Colored Markers`. +Dein Projekt sollte den Titel `Colored Markers` haben. ```js const title = document.querySelector('title'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md index 3f98e2a82eb..b7499520daa 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md @@ -13,7 +13,7 @@ Inside the `head` element, nest a `meta` element with the attribute `charset` se # --hints-- -You should have one `meta` element. +Du solltest ein `meta`-Element haben. ```js const meta = document.querySelectorAll('meta'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md index cc41dbe5950..25e96867b8e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md @@ -7,26 +7,26 @@ dashedName: step-5 # --description-- -You can have multiple self-closing `meta` elements on a web page. Each `meta` element adds information about the page that cannot be expressed by other HTML elements. +Du kannst mehrere selbst schließende `meta`-Elemente auf einer Webseite haben. Jedes `meta`-Element fügt Informationen über die Seite hinzu, die nicht durch andere HTML-Elemente wiedergegeben werden kann. -Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices. +Füge ein weiteres selbst schließendes `meta`-Element in den `head` ein. Gib ihm ein `name`-Attribut mit dem Wert `viewport` und ein `content`-Attribut mit dem Wert `width=device-width, initial-scale=1.0`, so dass deine Seite auf allen Geräten gleich aussieht. # --hints-- -You should have two `meta` elements. +Du solltest zwei `meta`-Elemente haben. ```js const meta = document.querySelectorAll('meta'); assert(meta?.length === 2); ``` -Your new `meta` element should be a self-closing element. +Dein neues `meta`-Element sollte ein selbst schließendes Element sein. ```js assert(code.match(/<\/meta>/i) === null); ``` -Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`. +Dein neues `meta`-Element sollte ein `name`-Attribut auf `viewport` und ein `content`-Attribut auf `width=device-width, initial-scale=1.0` gesetzt haben. ```js const meta = [...document.querySelectorAll('meta')]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md index d2771362f71..d3f12970f7e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md @@ -7,45 +7,45 @@ dashedName: step-6 # --description-- -Now you're ready to start adding content to the page. +Jetzt kannst du damit beginnen, der Seite Inhalte hinzuzufügen. -Within the `body`, nest an `h1` element with the text `CSS Color Markers`. +Niste innerhalb des `body` ein `h1`-Element mit dem Text `CSS Color Markers`. # --hints-- -Your code should have an `h1` element. +Dein Code sollte ein `h1`-Element haben. ```js const title = document.querySelector('h1'); assert.exists(title); ``` -You should have an opening `h1` tag. +Du solltest ein öffnendes `h1`-Tag haben. ```js assert(code.match(//i)); ``` -You should have a closing `h1` tag. +Du solltest ein schließendes `h1`-Tag haben. ```js assert(code.match(/<\/h1\s*>/i)); ``` -Your `h1` element should be within the `body` element. +Dein `h1`-Element sollte sich innerhalb des `body`-Elements befinden. ```js assert(document.querySelector('h1')?.parentElement?.localName === 'body'); ``` -Your `h1` element should have the text `CSS Color Markers`. +Dein `h1`-Element sollte den Text `CSS Color Markers` haben. ```js const h1 = document.querySelector('h1'); assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers') ``` -Remember, the casing and spelling matter for the `h1` text. +Denke daran, dass die Schreibweise und Rechtschreibung für den `h1`-Text wichtig sind. ```js const h1 = document.querySelector('h1'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md index 498711c610c..5aa2d86464f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md @@ -9,7 +9,7 @@ dashedName: step-7 In this project you'll work with an external CSS file to style the page. We've already created a `styles.css` file for you. But before you can use it, you'll need to link it to the page. -Nest a `link` element within the `head` element. Give it a `rel` attribute set to `stylesheet` and an `href` attribute set to `styles.css`. +Nest a `link` element within the `head` element. Weise ihm ein `rel`-Attribut mit `stylesheet` und ein `href`-Attribut mit `styles.css` zu. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md index 889a4e92041..31f11f9231c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md @@ -21,13 +21,13 @@ Create a new CSS rule that targets the `h1` element, and set its `text-align` pr # --hints-- -You should use an `h1` selector. +Du solltest einen `h1`-Selektor verwenden. ```js assert(new __helpers.CSSHelp(document).getStyle('h1')); ``` -Your `h1` CSS rule should have a `text-align` property set to `center`. +Deine `h1`-CSS-Regel sollte eine `text-align`-Eigenschaft von `center` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md index 4249b80925d..aa8eb6f78ff 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md @@ -7,37 +7,37 @@ dashedName: step-9 # --description-- -Now you'll add some elements that you'll eventually style into color markers. +Du wirst nun einige Elemente hinzufügen, die du eventuell als Farbmarkierungen gestalten kannst. -First, within the `body` element, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element. +Füge zuerst ein `div`-Element innerhalb des `body`-Elements hinzu und setze sein `class`-Attribut auf `container`. Stelle sicher, dass das `div` unterhalb des `h1`-Elements steht. # --hints-- -You should have an opening `div` tag. +Du solltest ein öffnendes `div`-Tag haben. ```js assert(code.match(//i)); ``` -You should have a closing `div` tag. +Du solltest ein schließendes `div`-Tag haben. ```js assert(code.match(/<\/div\s*>/i)); ``` -Your `div` element should be within your `body` element. +Dein `div`-Element sollte sich innerhalb deines `body`-Elements befinden. ```js assert(document.querySelector('div')?.parentElement?.localName === 'body'); ``` -Your `div` element should be after the `h1` element. +Dein `div`-Element sollte nach dem `h1`-Element stehen. ```js assert.exists(document.querySelector('h1 + div')); ``` -Your `div` element should have a `class` attribute set to `container`. +Dein `div`-Element sollte ein `class`-Attribut auf `container` gesetzt haben. ```js assert(document.querySelector('div')?.classList?.contains('container')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md index fe1c7ebe4c6..5139bcc325a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md @@ -7,9 +7,9 @@ dashedName: step-11 # --description-- -It's time to add some color to the marker. Remember that one way to add color to an element is to use a color keyword like `black`, `cyan`, or `yellow`. +Es ist an der Zeit, der Markierung etwas Farbe zu verleihen. Denke daran, dass die Verwendung eines color keyword, wie `black`, `cyan`, oder `yellow` eine Möglichkeit ist, um einem Element Farbe hinzuzufügen. -As a reminder, here's how to target the class `freecodecamp`: +Zur Erinnerung: So kannst du die Klasse `freecodecamp` bestimmen: ```css .freecodecamp { @@ -17,19 +17,19 @@ As a reminder, here's how to target the class `freecodecamp`: } ``` -Create a new CSS rule that targets the class `marker`, and set its `background-color` property to `red`. +Erstelle eine neue CSS-Regel, die die Klasse `marker` bestimmt, und setze ihre `background-color`-Eigenschaft auf `red`. -**Note:** You will not see any changes after adding the CSS. +**Hinweis:** Nach dem Hinzufügen des CSS wirst du keine Änderungen sehen. # --hints-- -You should create a class selector to target the `marker` class. +Du solltest einen Klassenselektor erstellen, um die `marker`-Klasse zu bestimmen. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')); ``` -Your `.marker` CSS rule should have a `background-color` property set to `red`. +Deine `.marker`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `red` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md index 57e46a13b72..90a6b25db9e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md @@ -7,19 +7,19 @@ dashedName: step-12 # --description-- -The background color was applied, but since the marker `div` element has no content in it, it doesn't have any height by default. +Die Hintergrundfarbe wurde angewendet, aber da das `div`-Markierungselement keinen Inhalt besitzt, hat es standardmäßig keine Höhe. -In your `.marker` CSS rule, set the `height` property to `25px` and the `width` property to `200px` +Setze in deiner `.marker`-CSS-Regel die `height`-Eigenschaft auf `25px` und die `width`-Eigenschaft auf `200px` # --hints-- -Your `.marker` CSS rule should have a `width` property set to `200px`. +Deine `.marker`-CSS-Regel sollte eine `width`-Eigenschaft auf `200px` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px'); ``` -Your `.marker` CSS rule should have a `height` property set to `25px`. +Deine `.marker`-CSS-Regel sollte eine `height`-Eigenschaft auf `25px` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md index 3b21008d45e..66b0d8cb808 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md @@ -7,15 +7,15 @@ dashedName: step-13 # --description-- -Your marker would look better if it was centered on the page. An easy way to do that is with the `margin` shorthand property. +Deine Markierung würde besser aussehen, wenn sie auf der Seite zentriert wäre. Eine einfache Möglichkeit, dies zu zun, ist die `margin` shorthand property zu verwenden. In the last project, you set the margin area of elements separately with properties like `margin-top` and `margin-left`. The `margin` shorthand property makes it easy to set multiple margin areas at the same time. -To center your marker on the page, set its `margin` property to `auto`. This sets `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` all to `auto`. +Um deine Markierung auf der Seite zu zentrieren, setze ihre `margin`-Eigenschaft auf `auto`. This sets `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` all to `auto`. # --hints-- -Your `.marker` CSS rule should have a `margin` property set to `auto`. +Deine `.marker`-CSS-Regel sollte eine `margin`-Eigenschaft auf `auto` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md index 72d772aff1e..6a562797471 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md @@ -9,7 +9,7 @@ dashedName: step-14 Now that you've got one marker centered with color, it's time to add the other markers. -In the `container` `div`, add two more `div` elements and give them each a class of `marker`. +Füge im `container` `div` zwei weitere `div`-Elemente hinzu und weise jedem die Klasse `marker` zu. # --hints-- @@ -19,7 +19,7 @@ Your first new `div` element should have an opening tag. assert([...code.matchAll(//gi)][2]); ``` -Your first new `div` element should have a closing tag. +Dein erstes neues `div`-Element sollte ein abschließendes Tag haben. ```js assert([...code.matchAll(/<\/div\s*>/gi)][2]); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md index d6953a4ddfb..fba87192d06 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md @@ -7,15 +7,15 @@ dashedName: step-15 # --description-- -While you have three separate marker `div` elements, they look like one big rectangle. You should add some space between them to make it easier to see each element. +Während du drei separate `div`-Markierungselemente hast, sehen sie wie ein einziges großes Rechteck aus. Du solltes etwas Abstand zwischen ihnen hinzufügen, um es einfacher zu machen, jedes Element zu erkennen. When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value. -In your `.marker` CSS rule, set the `margin` property to `10px auto`. +Setze in deiner `.marker`-CSS-Regel die `margin`-Eigenschaft auf `10px auto`. # --hints-- -Your `.marker` CSS rule should have a `margin` property set to `10px auto`. +Deine `.marker`-CSS-Regel sollte eine `margin`-Eigenschaft auf `10px auto` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md index a5dce3519fd..69ed6709615 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -To give the markers different colors, you will need to add a unique class to each one. Multiple classes can be added to an element by listing them in the `class` attribute and separating them with a space. For example, the following adds both the `animal` and `dog` classes to a `div` element. +Um den Markierungen verschiedene Farben zu geben, musst du jeder Markierung eine eindeutige Klasse hinzufügen. Mehrere Klassen können zu einem Element hinzugefügt werden, indem man diese in dem `class`-Attribut auflistet und sie mit einem Leerzeichen trennt. For example, the following adds both the `animal` and `dog` classes to a `div` element. ```html
@@ -15,19 +15,19 @@ To give the markers different colors, you will need to add a unique class to eac If you add multiple classes to an HTML element, the styles of the first classes you list may be overridden by later classes. -To begin, add the class `one` to the first marker `div` element. +Füge zunächst die Klasse `one` zum ersten `div`-Markierungselement hinzu. # --hints-- -You should add the class `one` to the first marker `div` element. +Du solltest die Klasse `one` zum ersten `div`-Markierungselement hinzufügen. ```js const containerFirstChild = [...document.querySelector('.container')?.children][0]; assert(containerFirstChild?.classList?.contains('one')); ``` -Your first marker `div` should have the classes `marker` and `one`. +Deine erste Markierung `div` sollte die Klassen `marker` und `one` haben. ```js const containerFirstChild = [...document.querySelector('.container')?.children][0]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md index d9e78af5d6e..05a0b37fd17 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md @@ -7,31 +7,31 @@ dashedName: step-20 # --description-- -Create a CSS rule that targets the class `two` and set its `background-color` property to `green`. +Erstelle eine CSS-Regel, die die Klasse `two` bestimmt und setze seine `background-color`-Eigenschaft auf `green`. -Also, create a separate CSS rule that targets the class `three` and set its `background-color` to `blue`. +Erstelle ebenfalls eine getrennte CSS-Regel, die die Klasse `three` bestimmt und setzte seine `background-color` auf `blue`. # --hints-- -You should use a class selector to target the class `two`. +Du solltest einen Klassen-Selektor verwenden, um die Klasse `two` zu bestimmen. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')); ``` -Your `.two` CSS rule should have a `background-color` property set to `green`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `green` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green'); ``` -You should use a class selector to target the class `three`. +Du solltest einen Klassen-Selektor verwenden, um die Klasse `three` zu bestimmen. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')); ``` -Your `.three` CSS rule should have a `background-color` property set to `blue`. +Deine `.three`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `blue` gestetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'blue'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md index f388e62eaf7..80ad1c43757 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md @@ -7,9 +7,9 @@ dashedName: step-21 # --description-- -There are two main color models: the additive RGB (red, green, blue) model used in electronic devices, and the subtractive CMYK (cyan, magenta, yellow, black) model used in print. +Es gibt zwei Hauptfarbenmodelle: Das additive RGB (Rot, Grün, Blau) Modell für elektronische Geräte und das subtractive CMYK (Cyan, Magenta, Gelb, Schwarz) Modell für Druck. -In this project, you'll work with the RGB model. This means that colors begin as black, and change as different levels of red, green, and blue are introduced. An easy way to see this is with the CSS `rgb` function. +In diesem Projekt wirst du mit dem RGB-Modell arbeiten. Das bedeutet, dass die Farben als Schwarz beginnen und sich bei der Zugabe verschiedener Rot-, Grün- und Blauanteile verändern. Eine einfache Möglichkeit, dies zu sehen, ist die `rgb`-CSS-Funktion. Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`. @@ -21,7 +21,7 @@ You should use a class selector to target the class `container`. assert(new __helpers.CSSHelp(document).getStyle('.container')); ``` -Your `.container` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.container`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md index 4eaeba0ca8f..4aa859ac225 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md @@ -7,25 +7,25 @@ dashedName: step-22 # --description-- -A function is a piece of code that can take an input and perform a specific action. The CSS `rgb` function accepts values, or arguments, for red, green, and blue, and produces a color: +A function is a piece of code that can take an input and perform a specific action. Die `rgb`-CSS-Funktion nimmt Werte oder arguments für Rot, Grün und Blau an und erzeugt eine Farbe: ```css rgb(red, green, blue); ``` -Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color. +Jeder rote, grüne und blaue Wert ist eine Zahl von `0` bis `255`. `0` bedeutet, dass es 0% dieser Farbe gibt und es schwarz ist. `255` bedeutet, dass es 100% dieser Farbe gibt. -In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`. +Ersetze in der `.one`-CSS-Regel das Schlüsselwort der Farbe `red` mit der `rgb`-Funktion. Setze für die `rgb`-Funktion den Wert für Rot auf `255`, den Wert für Grün auf `0` und den Wert für Blau auf `0`. # --hints-- -Your `.one` CSS rule should not use the `red` color keyword to set the `background-color` property. +Deine `.one`-CSS-Regel sollte nicht das `red`-Farbschlüsselwort verwenden, um die `background-color`-Eigenschaft festzulegen. ```js assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red'); ``` -Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. +Deine `.one`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(255, 0, 0)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md index 22d123c4c4f..380fe2f1a73 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md @@ -7,33 +7,33 @@ dashedName: step-23 # --description-- -Notice that the `background-color` for your marker is still red. This is because you set the red value of the `rgb` function to the max of `255`, or 100% red, and set both the green and blue values to `0`. +Beachte, dass die `background-color` für deine Markierung noch immer rot ist. Das liegt daran, dass du den Rot-Wert der `rgb`-Funktion auf den Maximalwert von `255`, also 100% Rot, und die Grün- und Blau-Werte auf `0` gesetzt hast. -Now use the `rgb` function to set the other colors. +Verwende jetzt die `rgb`-Funktion, um die anderen Farben festzulegen. -In the `.two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green, and `0` for the other values. And in the `.three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue, and `0` for the other values. +In der CSS-Regel `.two` verwendest du die Funktion `rgb`, um die `background-color` auf den Maximalwert für Grün und `0` für die anderen Werte zu setzen. Verwende in der `.three`-CSS-Regel die `rgb`-Funktion, um die `background-color` auf den maximalen Wert für Blau und `0` für andere Werte zu setzen. # --hints-- -Your `.two` CSS rule should not use the `green` color keyword to set the `background-color` property. +Deine `.two`-CSS-Regel sollte nicht das `green`-Farbschlüsselwort verwenden, um die `background-color`-Eigenschaft festzulegen. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green'); ``` -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(0, 255, 0)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); ``` -Your `.three` CSS rule should not use the `blue` color keyword to set the `background-color` property. +Deine `.three`-CSS-Regel sollte nicht das `blue`-Farbschlüsselwort verwenden, um die `background-color`-Eigenschaft festzulegen. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue'); ``` -Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 255)`. +Deine `.three`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(0, 0, 255)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md index 0b6733b6d7c..a0741c8414f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md @@ -7,13 +7,13 @@ dashedName: step-24 # --description-- -While the red and blue markers look the same, the green one is much lighter than it was before. This is because the `green` color keyword is actually a darker shade, and is about halfway between black and the maximum value for green. +Während die roten und blauen Markierungen gleich aussehen, ist die grüne viel heller als zuvor. Das liegt daran, dass das `green`-Farbschlüsselwort eigentlich eine dunklere Schattierung ist und auf halben Wege zwischen Schwarz und dem maximalen Wert für Grün liegt. -In the `.two` CSS rule, set the green value in the `rgb` function to `127` to lower its intensity. +Setze in der `.two`-CSS-Regel den grünen Wert in der `rgb`-Funktion auf `127`, um die Intensität zu senken. # --hints-- -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 0)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 127, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md index 72a1346e8e8..b86cff25679 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md @@ -7,13 +7,13 @@ dashedName: step-26 # --description-- -In the additive RGB color model, primary colors are colors that, when combined, create pure white. But for this to happen, each color needs to be at its highest intensity. +In the additive RGB color model, primary colors are colors that, when combined, create pure white. Doch damit dies geschieht, muss jede Farbe ihre höchste Intensität haben. -Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `.two` CSS rule, set green back to the max value of `255`. +Setzte, bevor du die Farben kombinierst, deine grüne Markierung wieder auf reines Grün. Setze für die `rgb`-Funktion in der `.two`-CSS-Regel Grün wieder auf den maximalen Wert von `255`. # --hints-- -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 255, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md index d35c198c523..ffb51cd60ef 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md @@ -7,13 +7,13 @@ dashedName: step-27 # --description-- -Now that you have the primary RGB colors, it's time to combine them. +Da du nun die primären RGB Farben hast, ist es an der Zeit, sie zu kombinieren. -For the `rgb` function in the `.container` rule, set the red, green, and blue values to the max of `255`. +Setze für die `rgb`-Funktion in der `.container`-Regel rote, grüne und blaue Werte auf das Maximum von `255`. # --hints-- -Your `.container` CSS rule should have a `background-color` property set to `rgb(255, 255, 255)`. +Deine `.container`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(255, 255, 255)` eingestellt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md index 91d064a717c..19ab15b2f31 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md @@ -7,11 +7,11 @@ dashedName: step-29 # --description-- -To create the next secondary color, cyan, update the `rgb` function in the `.two` CSS rule to combine pure green and pure blue. +Um die nächste Sekundärfarbe, Cyan, zu erstellen, aktualisiere die `rgb`-Funktion in der `.two`-CSS-Regel, um reines grün und reines blau zu kombinieren. # --hints-- -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(0, 255, 255)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md index a7c7c1f35e9..46c65d02d21 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md @@ -7,11 +7,11 @@ dashedName: step-30 # --description-- -To create the final secondary color, magenta, update the `rgb` function in the `.three` CSS rule to combine pure blue and pure red. +Um die letzte Sekundärfarbe, Magenta, zu erstellen, aktualisiere die `rgb`-Funktion in der `.three`-CSS-Regel, um pures Blau und pures Rot zu kombinieren. # --hints-- -Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 255)`. +Deine `.three`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(255, 0, 255)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md index 560ac7fb129..ff7e5537b29 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md @@ -7,13 +7,13 @@ dashedName: step-32 # --description-- -Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. This is because orange is the combination of red and yellow, and falls between the two colors on the color wheel. +Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. Das liegt daran, dass Orange die Kombination aus Rot und Gelb ist und zwischen den beiden Farben des Farbkreies fällt. -To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in the `.two` CSS rule so that green is at the max value, and set blue to `127`. +Kombiniere Cyan mit Grün, um die Tertiärfarbe Frühlingsgrün herzustellen. Aktualisiere die `rgb`-Funktion in der `.two`-CSS-Regel so, dass Grün den maximalen Wert hat und Blau auf `127` eingestellt ist. # --hints-- -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 127)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 255, 127)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md index a1397cd3269..36c1e949960 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md @@ -7,11 +7,11 @@ dashedName: step-33 # --description-- -And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in the `.three` CSS rule so that blue is at the max value, and set red to `127`. +Und kombiniere Magenta mit Blau, um die Tertiärfarbe Violett zu erstellen. Aktualisiere die `rgb`-Funktion in der `.three`-CSS-Regel, so dass Blau den maximalen Wert einnimmt und Rot auf `127` eingestellt ist. # --hints-- -Your `.three` CSS rule should have a `background-color` property set to `rgb(127, 0, 255)`. +Deine `.three`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(127, 0, 255)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md index 49471853218..7023bceba07 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md @@ -7,13 +7,13 @@ dashedName: step-34 # --description-- -There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta). +Es gibt drei weitere Tertiärfarben: Charteusegrün (Grün + Gelb), Azurblau (Blau + Cyan) und Rosa (Rot + Magenta). -To create chartreuse green, update the `rgb` function in the `.one` CSS rule so that red is at `127`, and set green to the max value. +Um Chartreusegrün herzustellen, aktualisiere die `rgb`-Funktion in der `.one`-CSS-Regel, so dass Rot auf `127` und Grün auf den maximalen Wert gesetzt ist. -For azure, update the `rgb` function in the `.two` CSS rule so that green is at `127` and blue is at the max value. +Aktualisiere für Azurblau die `rgb`-Funktion in der `.two`-CSS-Regel, so dass Grün auf `127` und Blau auf den maximalen Wert gesetzt ist. -And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` CSS rule so that blue is at `127` and red is at the max value. +Und aktualisiere für Rosa, das manchmal als Pink bezeichnet wird, die `rgb`-Funktion in der `.three`-CSS-Regel, so dass Blau auf `127` und Rot auf den maximalen Wert gesetzt ist. # --hints-- @@ -23,13 +23,13 @@ Your `.one` CSS rule should have a `background-color` property set to `rgb(127, assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)'); ``` -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 255)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 127, 255)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)'); ``` -Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 127)`. +Deine `.three`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(255, 0, 127)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md index da0652f0f86..e4a1b6d865a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md @@ -11,17 +11,17 @@ A color wheel is a circle where similar colors, or hues, are near eac Two colors that are opposite from each other on the color wheel are called complementary colors. If two complementary colors are combined, they produce gray. But when they are placed side-by-side, these colors produce strong visual contrast and appear brighter. -In the `rgb` function for the `.one` CSS rule, set the red value to the max of `255` to produce pure red. In the `rgb` function for `.two` CSS rule, set the values for green and blue to the max of `255` to produce cyan. +Setze in der `rgb`-Funktion für die `.one`-CSS-Regel den roten Wert auf das Maximum von `255`, um ein reines Rot zu erzeugen. Setze in der `rgb`-Funktion für die `.two`-CSS-Regel die Werte für Grün und Blau auf das Maximum von `255`, um Cyan zu erzeugen. # --hints-- -Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. +Deine `.one`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(255, 0, 0)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); ``` -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(0, 255, 255)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md index 10c624bf7fb..fd5883db4d6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md @@ -7,21 +7,21 @@ dashedName: step-37 # --description-- -Notice that the red and cyan colors are very bright right next to each other. This contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background. +Beachte, dass die roten und cyanischen Farben nebeneinander sehr hell sind. Dieser Kontrast kann ablenkend sein, wenn er auf einer Webseite übermäßig verwendet wird und er kann den Text schwer lesbar machen, wenn er auf einem komplementärfarbenen Hintergrund platziert ist. -It's better practice to choose one color as the dominant color, and use its complementary color as an accent to bring attention to certain content on the page. +Es ist besser eine Farbe als dominante Farbe zu wählen und seine Komplementärfarbe als Akzent zu verwenden, um auf bestimmte Inhalte der Seite aufmerksam zu machen. -First, in the `h1` rule, use the `rgb` function to set its `background-color` to cyan. +Verwende in der `h1`-Regel zuerst die `rgb`-Funktion, um die `background-color` auf Cyan zu setzen. # --hints-- -You should not remove or modify the `text-align` property or its value. +Du solltest die `text-align`-Eigenschaft oder ihren Wert nicht entfernen oder verändern. ```js assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); ``` -Your `h1` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. +Deine `h1`-CSS-Regel sollte eine `background-color`-Eigenschaft von `rgb(0, 255, 255)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md index 46e0f0d7401..09163dad5a7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md @@ -7,17 +7,17 @@ dashedName: step-38 # --description-- -Next, in the `.one` CSS rule, use the `rgb` function to set the `background-color` to black. And in the `.two` CSS rule, use the `rgb` function to set the `background-color` to red. +Verwende als nächstes die `rgb`-Funktion in der `.one`-CSS-Regel, um die `background-color` auf Schwarz einzustellen. Verwende die `rgb`-Funktion in der `.two`-CSS-Regel, um die `background-color` auf Rot einzustellen. # --hints-- -Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.one`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); ``` -Your `.two` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(255, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md index ef63909d422..ebb185be84f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md @@ -7,15 +7,15 @@ dashedName: step-39 # --description-- -Notice how your eyes are naturally drawn to the red color in the center? When designing a site, you can use this effect to draw attention to important headings, buttons, or links. +Fällt dir auf, wie deine Augen ganz natürlich von der roten Farbe in der Mitte angezogen werden? Bei der Gestaltung einer Webseite kannst du diesen Effekt nutzen, um auf wichtige Überschriften, Schaltflächen oder Links aufmerksam zu machen. -There are several other important color combinations outside of complementary colors, but you'll learn those a bit later. +Es gibt mehrere andere wichtige Farbkombinationen außerhalb der Komplementärfarben, du wirst diese später lernen. For now, use the `rgb` function in the `.two` CSS rule to set the `background-color` to black. # --hints-- -Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.two`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md index eab5b616e36..7fb92076ffc 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md @@ -11,7 +11,7 @@ And in the `h1` CSS rule, remove the `background-color` property and value to go # --hints-- -Your `h1` CSS rule should not have a `background-color` property or value. +Deine `h1`-CSS-Regel sollte keine `background-color`-Eigenschaft oder Wert haben. ```js const backgroundColorInstances = code.match(/background-color:.*;/gi); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md index 3d193001c90..0705cea7bd5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md @@ -7,20 +7,20 @@ dashedName: step-41 # --description-- -Now it's time to add other details to the markers, starting with the first one. +Es ist nun an der Zeit weitere Details zu den Markierungen hinzuzufügen, beginnend mit der ersten. -In the first marker `div` element, change the class `one` to `red`. +Ändere in dem ersten `div`-Markierungselement die Klasse `one` auf `red`. # --hints-- -Your first marker `div` should not have the class `one`. +Deine erste Markierung `div` sollte keine Klasse `one` haben. ```js const containerFirstChild = [...document.querySelector('.container')?.children][0]; assert(!containerFirstChild?.classList?.contains('one')); ``` -Your first marker `div` should have the classes `marker` and `red`. +Deine erste Markierung `div` sollte die Klassen `marker` und `red` haben. ```js const containerFirstChild = [...document.querySelector('.container')?.children][0]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md index 6cb94cfe4c0..f3613d89fa5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md @@ -7,7 +7,7 @@ dashedName: step-42 # --description-- -Update the `.one` CSS rule to target the new `red` class. +Aktualisiere die `.one`-CSS-Regel, um die neue `red`-Klasse auszuwählen. # --hints-- @@ -23,7 +23,7 @@ You should use a class selector to target the class `red`. assert(new __helpers.CSSHelp(document).getStyle('.red')); ``` -Your `.red` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. +Deine `.red`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgb(0, 0, 0)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md index d08c2382f0d..e1df95df11c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md @@ -7,32 +7,32 @@ dashedName: step-44 # --description-- -Next, change the class `two` to `green` in the second marker `div`, and the class `three` to `blue` in the third marker `div`. +Ändere als nächstes die Klasse `two` in der zweiten Markierung `div` auf `green` und die Klasse `three` in der dritten Markierung `div` auf `blue`. # --hints-- -Your second marker `div` should not have the class `two`. +Deine zweite Markierung `div` sollte keine Klasse `two` haben. ```js const containerSecondChild = [...document.querySelector('.container')?.children][1]; assert(!containerSecondChild?.classList?.contains('two')); ``` -Your second marker `div` should have the classes `marker` and `green`. +Deine zweite Markierung `div` sollte die Klassen `marker` und `green` haben. ```js const containerSecondChild = [...document.querySelector('.container')?.children][1]; assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green')); ``` -Your third marker `div` should not have the class `three`. +Deine dritte Markierung `div` sollte keine Klasse `three` haben. ```js const containerThirdChild = [...document.querySelector('.container')?.children][2]; assert(!containerThirdChild?.classList?.contains('three')); ``` -Your third marker `div` should have the classes `marker` and `blue`. +Deine dritte Markierung `div` sollte die Klassen `marker` und `blue` haben. ```js const containerThirdChild = [...document.querySelector('.container')?.children][2]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md index a931ee036b2..84bb6b3bcff 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md @@ -11,11 +11,11 @@ A very common way to apply color to an element with CSS is with hexadecimal Hex color values start with a `#` character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, `#4B5320`. -In the `.green` class selector, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue. +Setze im `.green`-Klassenselektor die `background-color`-Eigenschaft auf einen Hex-Farbcode mit den Werten `00` für rot, `FF` für grün und `00` blau. # --hints-- -Your `.green` CSS rule should have a `background-color` property set to `#00FF00`. +Deine `.green`-CSS-Regel sollte eine `background-color`-Eigenschaft mit dem Wert `#00FF00` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md index 0a19fda850a..8626bb30af5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md @@ -19,7 +19,7 @@ Lower the intensity of green by setting the green value of the hex color to `7F` # --hints-- -Your `.green` CSS rule should have a `background-color` property set to `#007F00`. +Deine `.green`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `#007F00` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md index 7a859e1dea1..5d136391d0d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md @@ -9,19 +9,19 @@ dashedName: step-48 The HSL color model, or hue, saturation, and lightness, is another way to represent colors. -The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness. +Die hsl-CSS-Funktion nimmt 3 Werte auf: Eine Zahl von 0 bis 360 für einen Farbton, einen Prozentsatz von 0 bis 100 für die Sättigung und einen Prozentsatz von 0 bis 100 für Helligkeit. -If you imagine a color wheel, the hue red is at 0 degrees, green is at 120 degrees, and blue is at 240 degrees. +Wenn du dir einen Farbkreis vorstellst ist der Farbton Rot auf 0 Grad, Grün auf 120 Grad und Blau auf 240 Grad. -Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. You must add the percent sign `%` to the saturation and lightness values. +Sättigung ist die Intensität einer Farbe von 0%, grau, bis zu 100% für die reine Farbe. You must add the percent sign `%` to the saturation and lightness values. Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral. -In the `.blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`. +Verwende in der `.blue`-CSS-Regel die `hsl`-Funktion, um die `background-color`-Eigenschaft auf reines Blau zu ändern. Setze den Farbton auf `240`, die Sättigung auf `100%` und die Helligkeit auf `50%`. # --hints-- -Your `.blue` CSS rule should have a `background-color` property set to `hsl(240, 100%, 50%)`. +Deine `.blue`-CSS-Regel sollte eine `background-color`-Eigenschaft von `hsl(240, 100%, 50%)` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md index a09f28c2078..a444d6c52d5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -7,13 +7,13 @@ dashedName: step-49 # --description-- -You've learned a few ways to set flat colors in CSS, but you can also use a color transition, or gradient, on an element. +Du hast ein paar Möglichkeiten gelernt, flache Farben in CSS zu setzen, aber du kannst auch einen Farbübergang oder gradient auf ein Element verwenden. -A gradient is when one color transitions into another. The CSS `linear-gradient` function lets you control the direction of the transition along a line, and which colors are used. +Farbverlauf bedeutet, wenn eine Farbe in eine andere übergeht. Die `linear-gradient`-CSS-Funktion lässt dich die Richtung des Übergangs entlang einer Linie kontrollieren und welche Farben verwendet werden sollen. -One thing to remember is that the `linear-gradient` function actually creates an `image` element, and is usually paired with the `background` property which can accept an image as a value. +Eine Sache, die man sich merken sollte, ist, dass die `linear-gradient` Funktion tatsächlich ein `image`-Element erstellt und normalerweise mit der `background`-Eigenschaft gepaart wird, die ein Bild als einen Wert annehmen kann. -In the `.red` CSS rule, change the `background-color` property to `background`. +Ändere in der `.red` CSS-Regel die `background-color`-Eigenschaft in `background`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md index 35e22768037..a129e077ca1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md @@ -13,15 +13,15 @@ The `linear-gradient` function is very flexible -- here is the basic syntax you' linear-gradient(gradientDirection, color1, color2, ...); ``` -`gradientDirection` is the direction of the line used for the transition. `color1` and `color2` are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, `rgb`, or `hsl`. +`gradientDirection` ist die Richtung der Linie, die für diesen Übergang verwendet wird. `color1` und `color2` sind Farbargumente, die im Übergang selbst verwendet werden. Diese können jede Art von Farbe sein, einschließlich Farbschlüsselwörter, hex, `rgb`, oder `hsl`. -Now you'll apply a red-to-green gradient along a 90 degree line to the first marker. +Nun wirst du einen rot-grünen Farbverlauf entlang einer 90°-Linie auf der ersten Makierung anwenden. -First, in the `.red` CSS rule, set the `background` property to `linear-gradient()`, and pass it the value `90deg` as the `gradientDirection`. +Setze zuerst in die `.red`-CSS-Regel, die `background`-Eigenschaft auf `linear-gradient()` und gebe ihr den Wert `90deg` als `gradientDirection`. # --hints-- -Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`. +Deine `.red`-CSS-Regel sollte eine `background`-Eigenschaft mit dem Wert `linear-gradient(90deg)` haben. ```js assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md index f103cbb2b3d..e9ab2403f68 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md @@ -7,19 +7,19 @@ dashedName: step-54 # --description-- -Farbregler erlauben dir festzulegen, wo genau die Farben entlang der Farbverlaufslinie platziert werden. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function. +Farbregler erlauben dir festzulegen, wo genau die Farben entlang der Farbverlaufslinie platziert werden. Sie sind eine Längeneinheit wie `px` oder Prozentsätze, die einer Farbe in der `linear-gradient`-Funktion folgen. -For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space: +In diesem rot-schwarzen Farbverlauf zum Beispiel findet der Übergang von Rot zu Schwarz am 90%-Punkt entlang der Farbverlaufslinie statt, so dass Rot den größten Teil des verfügbaren Platzes einnimmt: ```css linear-gradient(90deg, red 90%, black); ``` -In the `linear-gradient` function, add a `75%` color stop after the first red color argument. Do not add color stops to the other colors arguments. +Füge in die `linear-gradient`-Funktion einen `75%`-Farbstopp nach dem ersten roten Farbargument hinzu. Füge den anderen Farbargumenten keinen Farbstopp hinzu. # --hints-- -Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. +Deine `.red` CSS-Regel sollte eine `background`-Eigenschaft von `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))` haben. ```js assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md index 66b9e52d2da..07dd21cdbb6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md @@ -7,13 +7,13 @@ dashedName: step-55 # --description-- -Now that you know the basics of how the `linear-gradient` function and color-stops work, you can use them to make the markers look more realistic. +Da du nun die Grundlagen kennst, wie die `linear-gradient`-Funktion und die Farbregelung funktionieren, kannst du sie verwenden, um die Markierungen realistischer aussehen zu lassen. -In the `linear-gradient` function, set `gradientDirection` to `180deg`. +Setze in der `linear-gradient`-Funktion `gradientDirection` auf `180deg`. # --hints-- -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. +Deine `.red`-CSS-Regel sollte eine `background`-Eigenschaft auf `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))` gesetzt haben. ```js assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md index 52bf23fda25..52dd59df6ef 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md @@ -11,7 +11,7 @@ Setze als Nächstes die Farbabrechung für Rot auf `0%`, die Farbabrechung für # --hints-- -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. +Deine `.red`-CSS-Regel sollte eine `background`-Eigenschaft auf `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)` gesetzt haben. ```js assert.include(['linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md index 64f473594ef..d404f9490b1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md @@ -7,9 +7,9 @@ dashedName: step-57 # --description-- -Now that the color-stops are set, you'll apply different shades of red to each color argument in the `linear-gradient` function. The shades on the top and bottom edges of the marker will be darker, while the one in the middle will be lighter, as if there's a light above it. +Da nun die Farbinhalte bestimmt sind, wirst du verschiedene Rottöne auf jedes Farbargument in der `linear-gradient`-Funktion anwenden. Die Schatten am oberen und unteren Rand der Markierungen sind dunkler, während der in der Mitte heller sein wird, als ob ein Licht darüber scheint. -For the first color argument, which is currently pure red, update the `rgb` function so the value for red is `122`, the value for green is `74`, and the value for blue is `14`. +Aktualisiere für das erste Farbargument, das derzeit rein rot ist, die `rgb`-Funktion, so dass der Wert für Rot `122`, der Wert für Grün `74` und der Wert für Blau `14` entspricht. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md index 32da065f4bf..abf16a3e18d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md @@ -7,15 +7,15 @@ dashedName: step-64 # --description-- -Even without the color-stops, you might have noticed that the colors for the green marker transition at the same points as the red marker. The first color is at the start (0%), the second is in the middle (50%), and the last is at the end (100%) of the gradient line. +Auch ohne die Farbmarkierungen ist dir vielleicht aufgefallen, dass die Farben für die grüne Markierung an denselben Punkten ineinander übergehen wie die rote Markierung. Die erste Farbe ist am Anfang (0%), die zweite ist in der Mitte (50%) und die letzte ist am Ende (100%) der Farbverlaufslinie. -The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default. +Die Funktion `linear-gradient` berechnet diese Werte automatisch für dich und platziert die Farben standardmäßig gleichmäßig entlang der Verlaufslinie. -In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit. +Entferne in der CSS-Regel `.red` die drei Farben aus der Funktion `linear-gradient`, um deinen Code ein wenig zu vereinfachen. # --hints-- -Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. +Deine `.red` CSS-Regel sollte eine `background`-Eigenschaft auf `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))` gesetzt haben. ```js assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md index f88b187cbe0..2966c3530f1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md @@ -9,23 +9,23 @@ dashedName: step-65 If no `gradientDirection` argument is provided to the `linear-gradient` function, it arranges colors from top to bottom, or along a 180 degree line, by default. -Clean up your code a little more by removing the `gradientDirection` argument from both `linear-gradient` functions. +Bereinige deinen Code noch ein bisschen mehr, indem du das Argument `gradientDirection` aus beiden `linear-gradient`-Funktionen entfernst. # --hints-- -You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules. +Du solltest die `gradientDirection`-Argumente aus den `linear-gradient`-Funktionen in deinen `.red` und `.green` CSS-Regeln entfernen. ```js assert(!code.match(/linear-gradient\s*\(\s*180deg/gi)); ``` -Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. +Deine `.red` CSS-Regel sollte eine `background`-Eigenschaft auf `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))` gesetzt haben. ```js assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); ``` -Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`. +Deine `.green` CSS-Regel sollte eine `background`-Eigenschaft auf `linear-gradient(#55680D, #71F53E, #116C31)` gesetzt haben. ```js assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md index bb64aef94d8..de1e6acf6d8 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -7,13 +7,13 @@ dashedName: step-66 # --description-- -Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments. +Nun wirst du einen Farbverlauf auf die blaue Markierung anwenden, diesmal unter der Verwendung der `hsl`-Funktion als Farbargumente. -In the `.blue` CSS rule, change the `background-color` property to `background`. +Ändere in der `.blue`-CSS Regel die `background-color`-Eigenschaft auf `background`. # --hints-- -Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`. +Deine `.blue`-CSS-Regel sollte eine `background`-Eigenschaft mit dem Wert `hsl(240, 100%, 50%)` haben. ```js assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:hsl\(240,100%,50%\)/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md index 9c7b9e0276f..6fbf3e9bd80 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md @@ -7,11 +7,11 @@ dashedName: step-67 # --description-- -Use the `linear-gradient` function, and pass in the `hsl` function with the values `186` for hue, `76%` for saturation, and `16%` for lightness as the first color argument. +Verwende deine `linear-gradient`-Funktion und gehe in die `hsl`-Funktion über, mit den Werten `186` für Farbton, `76%` für Sättigung, und `16%` für Helligkeit als erstes Farbargument. # --hints-- -Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`. +Deine `.blue`-CSS-Regel sollte eine `background`-Eigenschaft mit dem Wert `linear-gradient(hsl(186, 76%, 16%))` haben. ```js assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md index d67d2cfa9b1..85adf76a772 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md @@ -7,11 +7,11 @@ dashedName: step-69 # --description-- -And as the third color argument, pass in the `hsl` function with the values `240` for hue, `56%` for saturation, and `42%` for lightness. +Und übergebe als drittes Farbargument die `hsl`-Funktion mit den Werten `240` für Farbton, `56%` für Sättigung und `42%` für Helligkeit. # --hints-- -Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`. +Deine `.blue` CSS-Regel sollte eine `background`-Eigenschaft auf `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))` gesetzt haben. ```js assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md index 85a6f2499f9..68af3eaf8cb 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md @@ -7,20 +7,20 @@ dashedName: step-70 # --description-- -Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. +Da nun die Markierungen die richtigen Farben haben, ist es an der Zeit, die Abgrenzungen für die Markierungen zu bauen. Beginne mit der roten Markierung. -Inside the red marker `div` element, create a new `div` element and give it a class of `sleeve`. +Erstelle im roten `div`-Markierungselement ein neues `div`-Element und gib ihm eine Klasse von `sleeve`. # --hints-- -Your new `div` element should be within the red marker's `div` element. +Dein neues `div`-Element sollte sich innerhalb des Elements der roten Markierung `div` befinden. ```js const redMarkerChildren = [...document.querySelector('.red')?.children]; assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); ``` -Your new `div` element should have a class of `sleeve`. +Dein neues `div`-Element sollte eine Klasse von `sleeve` haben. ```js const redMarkerChild = [...document.querySelector('.red')?.children][0]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md index 7ba305f0db8..993f2344eed 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md @@ -7,23 +7,23 @@ dashedName: step-71 # --description-- -Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`. +Erstelle eine neue CSS-Regel, die die Klasse `sleeve` bestimmt. Setze die `width`-Eigenschaft auf `110px` und die `height`-Eigenschaft auf `25px`. # --hints-- -You should use a class selector to target class `sleeve`. +Du solltest einen Klassenselektor verwenden, um die Klasse `sleeve` zu bestimmen. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); ``` -Your `.sleeve` CSS rule should have a `width` property set to `110px`. +Deine `.sleeve`-CSS-Regel sollte eine `width`-Eigenschaft auf `110px` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px'); ``` -Your `.sleeve` CSS rule should have a `height` property set to `25px`. +Deine `.sleeve`-CSS-Regel sollte eine `height`-Eigenschaft auf `25px` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md index 14b7b4e67ff..3afcd78f9d0 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md @@ -7,7 +7,7 @@ dashedName: step-80 # --description-- -Borders have several styles to choose from. You can make your border a solid line, but you can also use a dashed or dotted line if you prefer. Solid border lines are probably the most common. +Ränder haben verschiedene Stile zur Auswahl. Du kannst für den Rand eine durchgezogene Linie verwenden, aber wenn du es bevorzugst, kannst du auch eine gestrichelte oder gepunktete Linie verwenden. Durchgehende Randlinien sind wahrscheinlich am häufigsten. Füge in der `.sleeve`-CSS-Regel die `border-left-style`-Eigenschaft mit dem Wert `solid` hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md index cc5de7f5feb..ac2fe0b955c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md @@ -7,9 +7,9 @@ dashedName: step-81 # --description-- -Your border should be visible now. If no color is set, black is used by default. +Dein Rand sollte nun sichtbar sein. Wenn keine Farbe angegeben ist, wird standardmäßig Schwarz verwendet. -But to make your code more readable, it's better to set the border color explicitly. +Damit dein Code besser lesbar ist, ist es besser, die Rahmenfarbe explizit festzulegen. Füge in der `.sleeve`-CSS-Regel die `border-left-color`-Eigeschaft mit dem Wert `black` hinzu. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md index cb2f068e427..e2fa5379500 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md @@ -7,15 +7,15 @@ dashedName: step-82 # --description-- -The `border-left` shorthand property lets you to set the left border's width, style, and color at the same time. +Mit der zusammenfassenden `border-left`-Eigenschaft kannst du gleichzeitig die Breite, den Stil und die Farbe des linken Randes festlegen. -Here is the syntax: +Hier ist die Syntax: ```css border-left: width style color; ``` -In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. The values for the width, style, and color of the left border should be the same. +In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. Die Werte für die Breite, Stil und Farbe des linken Randes sollten gleich sein. # --hints-- @@ -37,7 +37,7 @@ Deine `.sleeve`-CSS-Regel sollte keine `border-left-color`-Eigenschaft und keine assert(!/border-left-color/g.test(code)); ``` -Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px solid black`. +Deine `.sleeve`-CSS-Regel sollte eine zusammenfassende `border-left`-Eigenschaft und den Wert `10px solid black` haben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md index 8a1d7aadfbf..f0ae26a0925 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md @@ -7,13 +7,13 @@ dashedName: step-83 # --description-- -Your marker is looking good. But to make it look even more realistic, you can change the border style to double solid borders. +Deine Markierung sieht gut aus. Aber um sie noch realistischer aussehen zu lassen, kannst du den Randstil auf doppelte, durchgehende Ränder ändern. -For the `border-left` shorthand property, change the border style value from `solid` to `double`. +Ändere für die zusammenfassende `border-left`-Eigenschaft den Wert des Randstils von `solid` zu `double`. # --hints-- -Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double black`. +Deine `.sleeve`-CSS-Regel sollte eine zusammenfassende `border-left`-Eigenschaft und den Wert `10px double black` enthalten. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md index 728be009246..649ff4234a9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md @@ -7,15 +7,15 @@ dashedName: step-74 # --description-- -Another way to set the opacity for an element is with the alpha channel. Similar to the `opacity` property, the alpha channel controls how transparent or opaque a color is. +Eine andere Möglichkeit, die Deckkraft für ein Element festzulegen, ist mit dem alpha channel. Ähnlich wie die Eigenschaft `opacity` steuert der Alphakanal, wie transparent oder undurchsichtig eine Farbe ist. -You've already set sleeve's opacity with a named color and the `opacity` property, but you can add an alpha channel to the other CSS color properties. +Du hast bereits die Deckkraft der Ärmel mit einer benannten Farbe und der Eigenschaft `opacity` eingestellt, aber du kannst einen Alphakanal zu den anderen CSS-Farbeigenschaften hinzufügen. -Inside the `.sleeve` rule, remove the `opacity` property and value. +Entferne innerhalb der `.sleeve`-Regel die `opacity`-Eigenschaft und den Wert. # --hints-- -Your `.sleeve` CSS rule should not have an `opacity` property and value. +Deine `.sleeve`-CSS-Regel sollte keine `opacity`-Eigenschaft und keinen Wert haben. ```js assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md index da48b8691f4..b76409f4f9a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md @@ -7,21 +7,21 @@ dashedName: step-75 # --description-- -You're already familiar with using the `rgb` function to set colors. To add an alpha channel to an `rgb` color, use the `rgba` function instead. +Du bist bereits mit der Verwendung der `rgb`-Funktion beim Festlegen von Farben vertraut. Um einen Alphakanal zu einer `rgb`- Farbe hinzuzufügen, verwende stattdessen die `rgba`-Funktion. -The `rgba` function works just like the `rgb` function, but takes one more number from `0` to `1.0` for the alpha channel: +Die `rgba`-Funktion funktioniert genau wie die `rgb`-Funktion, aber sie nimmt für den Alpha-Kanal eine weitere Zahl von `0` bis `1.0`: ```css rgba(redValue, greenValue, blueValue, alphaValue); ``` -You can also use an alpha channel with `hsl` and `hex` colors. You will see how to do that soon. +Du kannst auch einen Alphakanal mit `hsl`- und `hex`-Farben verwenden. Du wirst bald sehen, wie man das macht. -In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity. +Verwende die `rgba`-Funktion in der `.sleeve`-Regel, um die `background-color`-Eigenschaft auf reines Weiß mit 50% Deckkraft zu setzen. # --hints-- -Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`. +Deine `.sleeve`-CSS-Regel sollte eine `background-color`-Eigenschaft auf `rgba(255, 255, 255, 0.5)` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md index b86ea433025..891ed6a872e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md @@ -7,27 +7,27 @@ dashedName: step-76 # --description-- -Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right. +Dein Ärmel sieht gut aus, aber er würde noch besser aussehen, wenn er mehr auf der rechten Seite der Markierung positioniert wäre. Eine Möglichkeit, dies zu tun, besteht darin, vor dem Ärmel ein weiteres Element hinzuzufügen, um es nach rechts zu schieben. Add a new `div` with the class `cap` before the sleeve `div` element. # --hints-- -Your new `div` element should be within the red marker `div`. +Dein neues `div`-Element sollte sich innerhalb der roten Markierung `div` befinden. ```js const redMarkerChildren = [...document.querySelector('div.red')?.children]; assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); ``` -Your new `div` element should have a class of `cap`. +Dein neues `div`-Element sollte eine Klasse von `cap` haben. ```js const redMarkerChildren = [...document.querySelector('div.red')?.children]; assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); ``` -Your cap `div` should be before the sleeve `div`. +Deine Mütze `div` sollte vor dem Ärmel `div` stehen. ```js const redMarkerChildren = [...document.querySelector('div.red')?.children]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md index 59dd7bf3149..6b4c4a2f204 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md @@ -7,23 +7,23 @@ dashedName: step-78 # --description-- -It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line. +Es sieht so aus, als wäre dein Ärmel verschwunden, aber keine Sorge – er ist immer noch da. Was passiert ist, ist dass deine neue Mütze `div` die gesamte Breite der Markierung einnimmt und den Ärmel in die nächste Zeile schiebt. -This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other. +Dies liegt daran, dass die `display`-Standardeigenschaft für `div`-Elemente `block` ist. Wenn sich also zwei `block`-Elemente nebeneinander befinden, stapeln sie sich wie echte Blöcke. Zum Beispiel sind deine Markierungselemente alle übereinander gestapelt. -To position two `div` elements on the same line, set their `display` properties to `inline-block`. +Um zwei `div`-Elemente in derselben Zeile zu positionieren, setze ihre `display`-Eigenschaften auf `inline-block`. -Create a new rule to target both the `cap` and `sleeve` classes, and set `display` to `inline-block`. +Erstelle eine neue Regel, um sowohl die `cap` als auch die `sleeve`-Klassen zu bestimmen und setze `display` auf `inline-block`. # --hints-- -You should use a class selector to target both the `cap` and `sleeve` classes. +Du solltest einen Klassen-Selektor verwenden, um sowohl die `cap` als auch die `sleeve`-Klassen zu bestimmen. ```js assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); ``` -Your CSS rule should have a `display` property set to `inline-block`. +Deine CSS-Regel sollte eine `display`-Eigenschaft auf `inline-block` gesetzt haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md index 68d17b26f00..8588c6e11e4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md @@ -7,13 +7,13 @@ dashedName: step-51 # --description-- -You'll use the `rgb` function for the colors of this gradient. +Du wirst für die Farben dieses Farbverlaufs die `rgb`-Funktion verwenden. -In the `linear-gradient` function, use the `rgb` function to set the first color argument to pure red. +Verwende in der `linear-gradient`-Funktion die `rgb`-Funktion, um das erste Farbargument auf reines Rot zu setzen. # --hints-- -Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`. +Deine `.red`-CSS-Regel sollte eine `background`-Eigenschaft mit dem Wert `linear-gradient(90deg, rgb(255, 0, 0))` haben. ```js assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md index f9804a0bb34..c4f5254ecae 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md @@ -7,7 +7,7 @@ dashedName: step-84 # --description-- -The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border. +Die schwarze Farbe deines Randes sieht im Vergleich zur transparenten Hülle ziemlich hart aus. Du kannst einen Alphakanal verwenden, um die Deckkraft des schwarzen Rahmens zu senken. Verwende für die `border-left`-Sichteigenschaft die `rgba` Funktion, um den Farbwert auf pures Schwarz mit einer 75%-igen Deckkraft zu setzen. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md index 7b484d8a170..c6a1ee5ec33 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md @@ -7,13 +7,13 @@ dashedName: step-85 # --description-- -Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers. +Großartig. Deine rote Markierung sieht gut aus. Jetzt musst du nur noch die Mützen und Ärmel zu deinen anderen Markierungen hinzufügen. -Add a cap and sleeve to both the green and blue markers. Du kannst die `div`-Elemente aus der roten Markierung einfach kopieren und sie in die beiden anderen Markierungen einfügen. +Füge eine Mütze und einen Ärmel zu den grünen und blauen Markierungen hinzu. Du kannst die `div`-Elemente aus der roten Markierung einfach kopieren und sie in die beiden anderen Markierungen einfügen. # --hints-- -Your green marker `div` should contain two `div` elements. +Deine grüne Markierung `div` sollte zwei `div`-Elemente enthalten. ```js const greenMarkerChildren = [...document.querySelector('.green')?.children]; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md index a568baa76d5..baa5d4247b2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md @@ -7,30 +7,30 @@ dashedName: step-86 # --description-- -The last thing you'll do is add a slight shadow to each marker to make them look even more realistic. +Das Letzte, was du tun wirst, ist, jeder Markierung einen leichten Schatten hinzuzufügen, um sie noch realistischer erscheinen zu lassen. -The `box-shadow` property lets you apply one or more shadows around an element. Here is basic syntax: +The `box-shadow` property lets you apply one or more shadows around an element. Hier ist die grundlegende Syntax: ```css box-shadow: offsetX offsetY color; ``` -Here's how the `offsetX` and `offsetY` values work: +So funktionieren die `offsetX` und `offsetY`-Werte: -* both `offsetX` and `offsetY` accept number values in `px` and other CSS units -* a positive `offsetX` value moves the shadow right and a negative value moves it left -* a positive `offsetY` value moves the shadow down and a negative value moves it up -* if you want a value of zero (`0`) for any or both `offsetX` and `offsetY`, you don't need to add a unit. Every browser understands that zero means no change. +* sowohl `offsetX` als auch `offsetY` akzeptieren Zahlenwerte in `px` und anderen CSS-Einheiten +* ein positiver `offsetX`-Wert bewegt den Schatten nach rechts und ein negativer Wert bewegt ihn nach links +* ein positiver `offsetY`-Wert bewegt den Schatten nach unten und ein negativer Wert bewegt ihn nach oben +* wenn du einen Wert von Null (`0`) für irgendeinen oder beide `offsetX` und `offsetY` möchtest, musst du keine Einheit einfügen. Jeder Browser weiß, dass Null keine Änderungen bedeutet. -The height and width of the shadow is determined by the height and width of the element it's applied to. You can also use an optional `spreadRadius` value to spread out the reach of the shadow. More on that later. +Die Höhe und Breite des Schattens wird durch die Höhe und Breite des Elements bestimmt, auf das er angewendet wird. Du kannst auch einen optionalen `spreadRadius`-Wert verwenden, um die Reichweite des Schattens erweitern. Mehr dazu später. -Start by adding a simple shadow to the red marker. +Beginne, indem du der roten Markierung einen leichten Schatten hinzufügst. -In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`. +Füge in die `.red`-CSS-Regel die `box-shadow`-Eigenschaft mit den Werten `5px` für `offsetX`, `5px` für `offsetY` und `red` für `color` hinzu. # --hints-- -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`. +Deine `.red`-CSS-Regel sollte eine zusammenfassende `box-shadow`-Eigenschaft und den Wert `5px 5px red` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md index 302df614aa7..191c243d75c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md @@ -7,15 +7,15 @@ dashedName: step-88 # --description-- -Notice that the edges of the shadow are sharp. This is because there is an optional `blurRadius` value for the `box-shadow` property: +Beachte, dass die Kanten des Schattens scharf sind. Das liegt daran, dass es einen optionalen `blurRadius`-Wert für die `box-shadow`-Eigenschaft gibt: ```css box-shadow: offsetX offsetY blurRadius color; ``` -If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. The higher the value of `blurRadius`, the greater the blurring effect is. +If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. Je höher der Wert von `blurRadius`, desto größer ist der Verwischungseffekt. -In the `.green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px` for `blurRadius`, and `green` for `color`. +Füge in der `.green`-CSS-Regel die `box-shadow`-Eigenschaft mit den Werten `5px` für `offsetX`, `5px` für `offsetY`, `5px` für `blurRadius` und `green` für `color` hinzu. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md index 2e10ac04f1e..6e25244fe40 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md @@ -7,13 +7,13 @@ dashedName: step-90 # --description-- -Now that you're familiar with the `box-shadow` property you can finalize the shadows, starting with the one for the red marker. +Da du nun mit der Eigenschaft `box-shadow` vertraut bist, kannst du die Schatten fertigstellen, angefangen mit dem Schatten für die rote Markierung. -In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. Remember that you don't need to add units to a zero value. +Aktualisiere in der `.red`-CSS-Regel die Werte für die `box-shadow`-Eigenschaft, so dass `offsetX` `0`,`offsetY` `0`, `blurRadius` `20px`, `spreadRadius` `0` und `color` `red` ist. Denke daran, dass du dem Nullwert keine Einheiten hinzufügen musst. # --hints-- -Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 red`. +Deine `.red`-CSS-Regel sollte eine `box-shadow`-Shorthand-Eigenschaft mit dem Wert `0 0 20px 0 red` haben. ```js assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md index 4d88853597b..3d4864c8608 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md @@ -9,7 +9,7 @@ dashedName: step-92 Die Schatten deiner grünen und blauen Markierungen besitzen die gleiche Position, Weichzeichnung und Ausbreitung. Der einzige Unterschied sind die Farben. -In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Bleib vorerst bei den Farben `green` und `blue`. +Aktualisiere in den `.green`- und `.blue`-CSS-Regeln die Werte für die `box-shadow`-Eigenschaften, so dass `offsetX` dem Wert `0`, `offsetY` dem Wert `0`, `blurRadius` dem Wert `20px` und `spreadRadius` dem Wert `0` entspricht. Bleib vorerst bei den Farben `green` und `blue`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md index a42735bec8e..f6013a6809e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md @@ -7,31 +7,31 @@ dashedName: step-1 # --description-- -You will be building a happy Flappy Penguin, and further exploring CSS transforms and animations in the process. +Du wirst einen glücklichen Flappy Penguin bauen und in diesem Prozess CSS-Transformationen und Animationen weiter erkunden. -Beginne mit deinem grundlegenden HTML-Boilerplate. Include the `DOCTYPE` declaration, `html` element with a language set to English, the appropriate `meta` tags, a `head`, `body`, and `title` element. Verlinke auch dein Stylesheet mit der Seite. +Beginne mit deinem grundlegenden HTML-Boilerplate. Füge die `DOCTYPE`-Deklaration ein, das `html`-Element mit der Sprache Englisch, die passenden `meta`-Tags, ein `head`, `body` und `title`-Element. Verlinke auch dein Stylesheet mit der Seite. # --hints-- -Your code should have a `` declaration. +Dein Code sollte eine ``-Deklaration haben. ```js assert(code.match(//i)); ``` -Your code should have an `html` element. +Dein Code sollte ein `html`-Element haben. ```js assert.equal(document.querySelectorAll('html')?.length, 1); ``` -Your `html` element should have an opening tag with a `lang` attribute of `en`. +Dein `html`-Element sollte ein öffnendes Tag mit einem `lang`-Attribut von `en` haben. ```js assert(code.match(//gi)); ``` -Your `html` element should have a closing tag. +Dein `html`-Element sollte ein abschließendes Tag haben. ```js assert(code.match(/<\/html\s*>/gi)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md index ba375f72e73..9fc63b2c834 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md @@ -11,19 +11,19 @@ Target the `body` element to set the `background` to a linear gradient angled 45 # --hints-- -You should use the `body` element selector. +Du solltest den `body`-Element-Selektor verwenden. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('body')); ``` -You should use the `background` property in the `body` selector. +Du solltest die `background`-Eigenschaft im `body`-Selektor verwenden. ```js assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background')); ``` -You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`. +Du solltest den `background` auf `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))` setzen. ```js assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md index 87e43393d43..9a41c31c666 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md @@ -11,7 +11,7 @@ Remove both the horizontal and vertical scrollbars, using only one property. # --hints-- -You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`. +Du solltest `body` einen `overflow` von `--fcc-expected--` geben. But found `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md index 62fbb1a7834..c463312bacf 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md @@ -7,7 +7,7 @@ dashedName: step-12 # --description-- -Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`. +Nutze die `margin`-Eigenschaft, um das `.penguin`-Element horizontal zu zentrieren und den `margin-top` auf `75px` zu setzen. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md index 3ed2790e118..bbbe2d62bd1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md @@ -7,25 +7,25 @@ dashedName: step-13 # --description-- -To create some scenery in the background, you will add two mountains. +Um eine Landschaft im Hintergrund zu erschaffen, wirst du zwei Berge hinzufügen. -Above the `.penguin` element, add a `div` with a `class` of `left-mountain`. +Füge über das `.penguin`-Element einen `div` mit einer `class` von `left-mountain` hinzu. # --hints-- -You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`. +Du solltest einen neuen `div` innerhalb des `body` hinzufügen. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('body > div')?.length, 3); ``` -You should give the `div` a `class` of `left-mountain`. +Du solltest dem `div` eine `class` von `left-mountain` geben. ```js assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain'); ``` -You should place `.left-mountain` before `.penguin`. +Du solltest `.left-mountain` vor `.penguin` platzieren. ```js assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md index 388fd16cf85..0b49bf3f697 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md @@ -7,11 +7,11 @@ dashedName: step-15 # --description-- -To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout. +Um zu verhindern, dass der Berg das `.ground`-Element verschiebt, musst du seine `position` anpassen, damit sie keinen Platz im Seitenlayout einnimmt. # --hints-- -You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`. +Du solltest `.left-mountain` eine `position` von `absolute` geben. Found `--fcc-actual--` instead of `--fcc-expected--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md index cccb6e94ff6..bfc62116700 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md @@ -7,25 +7,25 @@ dashedName: step-16 # --description-- -To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by. +Um den Berg mehr nach einem Berg aussehen zu lassen, kannst du die `skew`-Transformationsfunktion verwenden, die zwei Argumente erfordert. Das erste ist ein Winkel um die x-Achse und das zweite ist ein Winkel um die y-Achse. -Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis. +Verwende die `transform`-Eigenschaft, um den Berg mit `0deg` an der x-Achse und `44deg` an der y-Achse zu verzerren. # --hints-- -You should give `.left-mountain` a `transform` property. +Du solltest `.left-mountain` eine `transform`-Eigenschaft geben. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform); ``` -You should use the `skew` function on `transform`. +Du solltest die `skew`-Funktion bei `transform` verwenden. ```js assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew'); ``` -You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`. +Du solltest `.left-mountain` einen `transform` von `skew(0deg, 44deg)` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md index 3b02da2be59..b2ed7ed15d4 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md @@ -7,17 +7,17 @@ dashedName: step-18 # --description-- -To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`. +Um den Berg und `.ground`-Elemente besser zu überlappen, gib dem Berg eine `margin-top` von `100px` und dem `.ground`-Element eine `margin-top` von `-58px`. # --hints-- -You should give `.left-mountain` a `margin-top` of `100px`. +Du solltest `.left-mountain` einen `margin-top` von `100px` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px'); ``` -You should give `.ground` a `margin-top` of `-58px`. +Du solltest `.ground` einen `margin-top` von `-58px` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md index 1ed01f45124..961f189c1ab 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md @@ -7,23 +7,23 @@ dashedName: step-19 # --description-- -To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`. +Füge einen weiteren Berg hinzu, um den Effekt eines Gebirges zu geben, indem du einen neuen `div` direkt nach `.left-mountain` erstellst, und gib dem neuen `div` die `class` von `back-mountain`. # --hints-- -You should add a new `div` within `body`. +Du solltest einen neuen `div` innerhalb des `body` hinzufügen. ```js assert.equal(document.querySelectorAll('body > div')?.length, 4); ``` -You should give the `div` a `class` of `back-mountain`. +Du solltest dem `div` eine `class` von `back-mountain` geben. ```js assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain'); ``` -You should place `.back-mountain` after `.left-mountain`. +Du solltest `.back-mountain` nach `.left-mountain` platzieren. ```js assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md index 2ad710c18f0..721bee07768 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md @@ -7,29 +7,29 @@ dashedName: step-20 # --description-- -Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`. +Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Setze dann die `background` auf einen linearen Farbverlauf, der mit `rgb(203, 241, 228)` beginnt und mit `rgb(47, 170, 255)` endet. # --hints-- -You should use the `.back-mountain` selector. +Du solltest den `.back-mountain`-Selektor verwenden. ```js assert.match(code, /\.back-mountain\s*\{/); ``` -You should give `.back-mountain` a `width` of `300px`. +Du solltest `.back-mountain` eine `width` von `300px` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px'); ``` -You should give `.back-mountain` a `height` of `300px`. +Du solltest `.back-mountain` eine `height` von `300px` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px'); ``` -You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`. +Du solltest `.back-mountain` einen `background` von `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))` geben. ```js assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md index df78b925bbc..6218256c60c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md @@ -7,11 +7,11 @@ dashedName: step-21 # --description-- -Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout. +Lege die `position`-Eigenschaft des `.back-mountain` fest, um zu verhindern, dass sie Platz im Seitenlayout einnimmt. # --hints-- -You should give `.back-mountain` a `position` of `absolute`. +Du solltest `.back-mountain` eine `position` von `absolute` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md index cccb009443b..30c7264efff 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md @@ -7,11 +7,11 @@ dashedName: step-23 # --description-- -Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`. +Drehe das `.back-mountain`-Element um `45deg` im Uhrzeigersinn. Gib ihm dann eine `left`-Eigenschaft von `110px` und eine `top`-Eigenschaft von `225px`. # --hints-- -You should use the `transform` property to rotate the element. +Du solltest die `transform`-Eigenschaft verwenden, um das Element zu drehen. ```js const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain'); @@ -35,7 +35,7 @@ if (backMountain?.transform) { } ``` -You should give `.back-mountain` a `left` property. +Du solltest `.back-mountain` eine `left`-Eigenschaft geben. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left); @@ -47,7 +47,7 @@ You should give `.back-mountain` a `left` property of `--fcc-expected--`, but fo assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px'); ``` -You should give `.back-mountain` a `top` property. +Du solltest `.back-mountain` eine `top`-Eigenschaft geben. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md index b1df5478bdc..805a7f780b1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md @@ -7,17 +7,17 @@ dashedName: step-26 # --description-- -Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle. +Setze die `position`-Eigenschaft der Sonne fest, um zu verhindern, dass sie im Seitenlayout Platz einnimmt und setze den `border-radius` so fest, dass die Form der Sonne ein Kreis ist. # --hints-- -You should give `.sun` a `position` of `absolute`. +Du solltest `.sun` eine `position` von `absolute` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute'); ``` -You should give `.sun` a `border-radius` of `50%`. +Du solltest `.sun` einen `border-radius` von `50%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md index cee7ffb723b..f3134ee49f3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md @@ -7,25 +7,25 @@ dashedName: step-28 # --description-- -Your penguin will consist of two main sections: the head, and the body. +Dein Pinguin wird aus zwei Hauptteilen bestehen: dem Kopf und dem Körper. -Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`. +Füge innerhalb `.penguin` zwei neue `div`-Elemente hinzu. Der erste mit einer `class` von `penguin-head` und der zweite mit einer `class` von `penguin-body`. # --hints-- -You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`. +Du solltest zwei neue `div`-Elemente zu `.penguin` hinzufügen. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin > div')?.length, 2); ``` -You should give the first `div` a `class` of `penguin-head`. +Du solltest dem ersten `div` eine `class` von `penguin-head` geben. ```js assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head'); ``` -You should give the second `div` a `class` of `penguin-body`. +Du solltest dem zweiten `div` eine `class` von `penguin-body` geben. ```js assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md index 53c45313648..3e4bc025354 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md @@ -7,29 +7,29 @@ dashedName: step-29 # --description-- -Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`. +Ändere das Stapellevel des `.penguin`-Elements, so dass es vor dem `.ground`-Element erscheint und gib ihm eine `position` von `relative`. # --hints-- -You should use the `z-index` property to change the stack level. +Du solltest die `z-index`-Eigenschaft verwenden, um die Staptelebene zu ändern. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex); ``` -You should give the `.penguin` element a `z-index` of `4`. +Du solltest dem `.penguin`-Element einen `z-index` von `4` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4'); ``` -You should give `.penguin` a `position` property. +Du solltest `.penguin` eine `position`-Eigenschaft geben. ```js assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position); ``` -You should give `.penguin` a `position` of `relative`. +Du solltest `.penguin` eine `position` von `relative` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md index dcba6f00211..f0b76080e8d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md @@ -11,13 +11,13 @@ Da das `.ground`-Element im Stapelkontext des Seitenlayouts an dritter Stelle st # --hints-- -You should give `.ground` a `z-index` of `3`. +Du solltest `.ground` einen `z-index` von `3` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); ``` -You should give `.ground` a `position` of `absolute`. +Du solltest `.ground` eine `position` von `absolute` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md index 543a3ea8d58..173a1cd55fc 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md @@ -7,29 +7,29 @@ dashedName: step-30 # --description-- -Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`. +Visiere das `.penguin-head`-Element an und gib ihm die Hälfte der `width` seines übergeordneten Elements und eine `height` von `45%`. Setze dann den `background` auf einen linearen Farbverlauf bei `45deg`, der mit `gray` beginnt und mit `rgb(239, 240, 228)` endet. # --hints-- -You should use the `.penguin-head` selector. +Du solltest den `.penguin-head`-Selektor verwenden. ```js assert.match(code, /\.penguin-head\s*\{/); ``` -You should give `.penguin-head` a `width` of `50%`. +Du solltest `.penguin-head` eine `width` von `50%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%'); ``` -You should give `.penguin-head` a `height` of `45%`. +Du solltest `.penguin-head` eine `height` von `45%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%'); ``` -You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`. +Du solltest `.penguin-head` einen `background` von `linear-gradient(45deg, gray, rgb(239, 240, 228))` geben. ```js assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md index 2bf2522a56b..a7050534e03 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md @@ -9,17 +9,17 @@ dashedName: step-48 Currently, the two `.face` elements are on top of each other. -Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element. +Behebe dies, indem du eine `class` von `left` zum ersten `.face`-Element und eine `class` von `right` zum zweiten `.face`-Element hinzufügst. # --hints-- -You should give a `class` of `left` to the first `.face` element. +Du solltest dem ersten `.face`-Element eine `class` von `left` geben. ```js assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left'); ``` -You should give a `class` of `right` to the second `.face` element. +Du solltest dem zweiten `.face`-Element eine `class` von `right` geben. ```js assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md index 6a4c90038ca..1a69b893b0a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md @@ -11,13 +11,13 @@ Target the `.face` element with the `left` class, and position it `5%` left of i # --hints-- -You should use the `.face.left` selector. +Du solltest den `.face.left`-Selektor verwenden. ```js assert.match(code, /\.face\.left\s*\{/); ``` -You should give `.face.left` a `left` property. +Du solltest `.face.left` eine `left`-Eigenschaft geben. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md index a972307297d..fc228162688 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md @@ -7,23 +7,23 @@ dashedName: step-51 # --description-- -Below the `.face.right` element, add a `div` element with a `class` of `chin`. +Füge unter dem `.face.right`-Element ein `div`-Element mit einer `class` von `chin` hinzu. # --hints-- -You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Du solltest ein `div`-Element innerhalb `.penguin-head` hinzufügen. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3); ``` -You should give the `div` a `class` of `chin`. +Du solltest dem `div` eine `class` von `chin` geben. ```js assert.exists(document.querySelector('.penguin-head > div.chin')); ``` -You should place the `div` element below the `.face.right` element. +Du solltest das `div`-Element unter dem `.face.right`-Element platzieren. ```js assert.exists(document.querySelector('.face.right + .chin')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md index b4497ac61de..d24edc8dbc3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md @@ -7,17 +7,17 @@ dashedName: step-52 # --description-- -Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`. +Bestimme das `.chin`-Element und gib ihm eine `width` von `90%`, `height` von `70%` und `background-color` von `white`. # --hints-- -You should use the `.chin` selector. +Du solltest den `.chin`-Selektor verwenden. ```js assert.match(code, /\.chin\s*\{/); ``` -You should give `.chin` a `width` property. +Du solltest `.chin` eine `width`-Eigenschaft geben. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width); @@ -29,7 +29,7 @@ You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%'); ``` -You should give `.chin` a `height` property. +Du solltest `.chin` eine `height`-Eigenschaft geben. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height); @@ -41,7 +41,7 @@ You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actua assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%'); ``` -You should give `.chin` a `background-color` property. +Du solltest `.chin` eine `background-color`-Eigenschaft geben. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md index 2b9e0746385..0d6c8d17087 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md @@ -7,11 +7,11 @@ dashedName: step-53 # --description-- -Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`. +Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Gib dann den oberen Ecken einen Radius von `70%` und den unteren Ecken einen Radius von `100%`. # --hints-- -You should give `.chin` a `top` property. +Du solltest `.chin` eine `top`-Eigenschaft geben. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top); @@ -23,7 +23,7 @@ You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual-- assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%'); ``` -You should give `.chin` a `left` property. +Du solltest `.chin` eine `left`-Eigenschaft geben. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left); @@ -35,7 +35,7 @@ You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual- assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%'); ``` -You should give `.chin` a `border-radius` of `70% 70% 100% 100%`. +Du solltest `.chin` einen `border-radius` von `70% 70% 100% 100%` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md index ef437e733dd..c7e29597164 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md @@ -7,19 +7,19 @@ dashedName: step-54 # --description-- -So far, the `.face` and `.chin` elements have the same `background-color`. +Bislang haben die `.face`- und `.chin`-Elemente die gleiche `background-color`. -Create a custom CSS property called `--penguin-face`, and set it to `white`. +Erstelle eine benutzerdefinierte CSS-Eigenschaft namens `--penguin-face` und setze sie auf `white`. # --hints-- -You should use the `:root` selector. +Du solltest den `:root`-Selektor verwenden. ```js assert.match(code, /:root\s*\{/); ``` -You should give `:root` a `--penguin-face` property. +Du solltest `:root` eine `--penguin-face`-Eigenschaft geben. ```js assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md index 1a40f8d0f72..ff22a084421 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md @@ -7,47 +7,47 @@ dashedName: step-56 # --description-- -Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`. +Füge unter deinem `.chin`-Element zwei `div`-Elemente mit einer `class` von `eye` hinzu. Gib dem ersten `.eye`-Element eine `class` von `left` und dem zweiten `.eye`-Element eine `class` von `right`. # --hints-- -You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Du solltest zwei `div`-Elemente innerhalb `.penguin-head` hinzufügen. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5); ``` -You should give the first new `div` a `class` of `eye`. +Du solltest dem ersten neuen `div` eine `class` von `eye` geben. ```js assert.exists(document.querySelector('.penguin-head > div.eye')); ``` -You should give the second new `div` a `class` of `eye`. +Du solltest dem zweiten neuen `div` eine `class` von `eye` geben. ```js assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2); ``` -You should give the first new `div` a `class` of `left`. +Du solltest dem ersten neuen `div` eine `class` von `left` geben. ```js assert.exists(document.querySelector('.penguin-head > div.eye.left')); ``` -You should give the second new `div` a `class` of `right`. +Du solltest dem zweiten neuen `div` eine `class` von `right`. ```js assert.exists(document.querySelector('.penguin-head > div.eye.right')); ``` -You should place `div.eye.left` after `div.chin`. +Du solltest `div.eye.left` nach `div.chin` platzieren. ```js assert.exists(document.querySelector('.chin + .eye.left')); ``` -You should place `div.eye.right` after `div.eye.left`. +Du solltest `div.eye.right` nach `div.eye.left` platzieren. ```js assert.exists(document.querySelector('.eye.left + .eye.right')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md index fb6293b2066..7ba47593ec9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md @@ -7,7 +7,7 @@ dashedName: step-65 # --description-- -Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`. +Positioniere die `.blush`-Elemente `65%` vom oberen Rand des übergeordneten Elements und gib allen Ecken einen Radius von `50%`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md index ba528b1e071..4f9b0dc7785 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md @@ -7,11 +7,11 @@ dashedName: step-66 # --description-- -Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent. +Bestimme das `.blush`-Element mit einer `class` von `left` und positioniere es `15%` links von seinem übergeordneten Element. Bestimme dann das `.blush`-Element mit einer `class` von `right` und positioniere es `15%` rechts von seinem übergeordneten Element. # --hints-- -You should use the `.blush.left` selector. +Du solltest den `.blush.left`-Selektor verwenden. ```js assert.match(code, /\.blush\.left\s*\{/); @@ -23,7 +23,7 @@ You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-a assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%'); ``` -You should use the `.blush.right` selector. +Du solltest den `.blush.right`-Selektor verwenden. ```js assert.match(code, /\.blush\.right\s*\{/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md index c8e75ba8bc4..cc73c9eb3d7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md @@ -7,47 +7,47 @@ dashedName: step-67 # --description-- -Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`. +Füge unter dem `.blush.right`-Element zwei `div`-Elemente mit einer `class` von `beak` hinzu. Gib ebenfalls dem ersten `.beak`-Element eine `class` von `top` und dem zweiten `.beak`-Element eine `class` von `bottom`. # --hints-- -You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Du solltest zwei `div`-Elemente innerhalb `.penguin-head` hinzufügen. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9); ``` -You should give the first new `div` a `class` of `beak`. +Du solltest dem ersten neuen `div` eine `class` von `beak` geben. ```js assert.exists(document.querySelector('.penguin-head > div.beak')); ``` -You should give the second new `div` a `class` of `beak`. +Du solltest dem zweiten neuen `div` eine `class` von `beak` geben. ```js assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2); ``` -You should give the first new `div` a `class` of `top`. +Du solltest dem ersten neuen `div` eine `class` von `top` geben. ```js assert.exists(document.querySelector('.penguin-head > div.beak.top')); ``` -You should give the second new `div` a `class` of `bottom`. +Du solltest dem zweiten neuen `div` eine `class` von `bottom` geben. ```js assert.exists(document.querySelector('.penguin-head > div.beak.bottom')); ``` -You should place `div.beak.top` after `div.blush.right`. +Du solltest `div.beak.top` nach `div.blush.right` platzieren. ```js assert.exists(document.querySelector('.blush.right + .beak.top')); ``` -You should place `div.beak.bottom` after `div.beak.top`. +Du solltest `div.beak.bottom` nach `div.beak.top` platzieren. ```js assert.exists(document.querySelector('.beak.top + .beak.bottom')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md index 286168490a3..a35e4a9a609 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md @@ -11,7 +11,7 @@ Target the `.beak` elements, and give them a `height` of `10%`, `background-colo # --hints-- -You should use the `.beak` selector. +Du solltest den `.beak`-Selektor verwenden. ```js assert.match(code, /\.beak\s*\{/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md index cd4ae1ff1af..4f13cfaee9c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md @@ -11,7 +11,7 @@ Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, # --hints-- -You should use the `.beak.top` selector. +Du solltest den `.beak.top`-Selektor verwenden. ```js assert.match(code, /\.beak\.top\s*\{/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md index 7edf04b4358..13a34fd9500 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md @@ -11,7 +11,7 @@ Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4% # --hints-- -You should use the `.beak.bottom` selector. +Du solltest den `.beak.bottom`-Selektor verwenden. ```js assert.match(code, /\.beak\.bottom\s*\{/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md index 36eeb4cb74d..bc91df03543 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md @@ -7,7 +7,7 @@ dashedName: step-71 # --description-- -Der Körper des Pinguins sieht ein wenig schlicht aus. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element. +Der Körper des Pinguins sieht ein wenig schlicht aus. Verschönere ihn, indem du ein `div`-Element mit dem Wert `shirt` für das `class`-Attribut direkt vor das `.penguin-body`-Element einfügst. # --hints-- @@ -17,7 +17,7 @@ Du solltest ein `div`-Element innerhalb des `.penguin`-Elements hinzufügen. Es assert.equal(document.querySelectorAll('.penguin > div')?.length, 3); ``` -You should give the new `div` a `class` of `shirt`. +Du solltest dem neuen `div`-Element ein `class`-Attribut mit dem Wert `shirt` zuweisen. ```js assert.exists(document.querySelector('.penguin > div.shirt')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md index 3d4eef08d78..7a08050c7de 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md @@ -7,11 +7,11 @@ dashedName: step-72 # --description-- -Within the `.shirt` element, add a `div` with the following emoji as content: 💜 +Füge innerhalb des `.shirt`-Elements einen `div` mit dem folgenden Emoji als Inhalt hinzu: 💜 # --hints-- -You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`. +Du solltest ein `div`-Element innerhalb `div.shirt` einfügen. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.shirt > div')?.length, 1); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md index 0f297cb5e81..244845638a1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md @@ -7,7 +7,7 @@ dashedName: step-81 # --description-- -Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`. +Positioniere die `.foot`-Elemente `85%` vom oberen Rand des übergeordneten Elements und gib allen Ecken einen Radius von `50%`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md index b65832cacfa..221dc295970 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md @@ -7,13 +7,13 @@ dashedName: step-82 # --description-- -The penguin's beak and feet share the same `color`. +Der Schnabel und die Füße des Pinguins haben die gleiche `color`. -Create a new custom CSS variable named `--penguin-picorna`, and replace all relavant property values with it. +Erstelle eine neue benutzerdefinierte CSS-Variable namens `--penguin-picorna` und ersetze alle relevanten Eigenschaftswerte durch diese. # --hints-- -You should give `:root` a `--penguin-picorna` property. +Du solltest `:root` eine `--penguin-picorna`-Eigenschaft geben. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md index 9679247faad..583e829e1f3 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md @@ -11,7 +11,7 @@ Target the `.foot` element with a `class` of `left`, and position it `25%` left # --hints-- -You should use the `.foot.left` selector. +Du solltest den `.foot.left`-Selektor verwenden. ```js assert.match(code, /\.foot\.left\s*\{/); @@ -23,7 +23,7 @@ You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-ac assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%'); ``` -You should use the `.foot.right` selector. +Du solltest den `.foot.right`-Selektor verwenden. ```js assert.match(code, /\.foot\.right\s*\{/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md index 8e9d19465f5..f62d7c11144 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md @@ -7,11 +7,11 @@ dashedName: step-84 # --description-- -To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`. +Um die Füße des Pinguins mehr nach _penguiny_ aussehen zu lassen, drehe den linken Fuß um `80deg` und den rechten um `-80deg`. # --hints-- -You should give `.foot.left` a `transform` of `rotate(80deg)`. +Du solltest `.foot.left` einen `transform` von `rotate(80deg)` geben. ```js const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left'); @@ -23,7 +23,7 @@ if (leftFoot?.transform) { } ``` -You should give `.foot.right` a `transform` of `rotate(-80deg)`. +Du solltest `.foot.right` eine `transform` von `rotate(-80deg)` geben. ```js const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md index 511c6a78a90..1a8bfa13898 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md @@ -7,43 +7,43 @@ dashedName: step-86 # --description-- -Fun fact: Penguins cannot fly without wings. +Fun Fact: Pinguine können nicht ohne Flügel fliegen. -Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`. +Füge innerhalb `.penguin-body`, vor den `.foot`-Elementen, zwei `div`-Elemente mit einer `class` von `arm` hinzu. Gib dem ersten `.arm` eine `class` von `left` und dem zweiten `.arm` eine `class` von `right`. # --hints-- -You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. +Du solltest zwei `div`-Elemente innerhalb `.penguin-body` hinzufügen. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. ```js assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4); ``` -You should give the first new `div` a `class` of `arm`. +Du solltest dem ersten neuen `div` eine `class` von `arm` geben. ```js assert.exists(document.querySelector('.penguin-body > div.arm')); ``` -You should give the second new `div` a `class` of `arm`. +Du solltest dem zweiten neuen `div` eine `class` von `arm` geben. ```js assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2); ``` -You should give one `div` a `class` of `left`. +Du solltest einem `div` eine `class` von `left` geben. ```js assert.exists(document.querySelector('.penguin-body > div.arm.left')); ``` -You should give the other `div` a `class` of `right`. +Du solltest dem anderen `div` eine `class` von `right` geben. ```js assert.exists(document.querySelector('.penguin-body > div.arm.right')); ``` -You should place `.arm.right` after `.arm.left`. +Du solltest `.arm.right` nach `.arm.left` platzieren. ```js assert.exists(document.querySelector('.arm.left + .arm.right')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md index fb71f4e0c3c..ebbb0540f06 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md @@ -7,7 +7,7 @@ dashedName: step-87 # --description-- -Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`. +Wähle die `.arm`-Elemente aus und gib ihnen eine `width` mit dem Wert `30%`, eine `height` mit dem Wert `60%` und einen `background` in Form eines linearen Farbverlaufs mit `90deg` im Uhrzeigersinn, der bei `gray` beginnt und bei `rgb(209, 210, 199)` endet. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md index c3d7275ee54..252d33050a7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md @@ -7,11 +7,11 @@ dashedName: step-88 # --description-- -Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it. +Erstelle eine eigene CSS-Variable namens `--penguin-skin` und setze sie auf `gray`. Ersetze dann alle relevanten Eigenschaftswerte mit ihr. # --hints-- -You should give `:root` a `--penguin-skin` property. +Du solltest `:root` eine `--penguin-skin`-Eigenschaft geben. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin')); @@ -23,7 +23,7 @@ You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`. assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray'); ``` -You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`. +Du solltest `.penguin-head` einen `background` von `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))'); @@ -35,7 +35,7 @@ You should give `.penguin-body::before` a `background-color` of `var(--penguin-s assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)'); ``` -You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`. +Du solltest `.arm` einen `background` von `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md index ff124a22021..2350dd2e865 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md @@ -7,35 +7,35 @@ dashedName: step-96 # --description-- -Give `wave` four waypoints starting at `10%`, and incrementing by `10%`. +Gib der `wave` vier Wegpunkte, die bei `10%` beginnen und um `10%` ansteigen. # --hints-- -You should add a `10%` waypoint for `@keyframes wave`. +Du solltest einen `10%`-Wegpunkt für `@keyframes wave` hinzufügen. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%')); ``` -You should add a `20%` waypoint for `@keyframes wave`. +Du solltest einen `20%`igen Wegpunkt für `@keyframes wave` hinzufügen. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%')); ``` -You should add a `30%` waypoint for `@keyframes wave`. +Du solltest einen `30%`igen Wegpunkt für `@keyframes wave` hinzufügen. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%')); ``` -You should add a `40%` waypoint for `@keyframes wave`. +Du solltest einen `40%`igen Wegpunkt für `@keyframes wave` hinzufügen. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%')); ``` -You should have 4 waypoints in your keyframe. +Du solltest 4 Wegpunkte in deinem Keyframe haben. ```js assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md index 9b003e5ea59..145b9e3f25f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md @@ -7,11 +7,11 @@ dashedName: step-97 # --description-- -Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm. +Drehe innerhalb deines ersten Wegpunktes auf `110deg` und behalte die Skalierung des linken Arms. # --hints-- -You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. +Du solltest dem `10%`-Wegpunkt einen `transform` von `rotate(110deg) scaleX(-1)` geben. ```js const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md index c2c26489779..6ff27c1ade2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md @@ -7,11 +7,11 @@ dashedName: step-98 # --description-- -Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm. +Drehe innerhalb des zweiten Wegpunktes auf `130deg` und behalte die Skalierung des linken Arms. # --hints-- -You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. +Du solltest den `20%`igen Wegpunkt einen `transform` von `rotate(130deg) scaleX(-1)` geben. ```js const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md index f10c49a3e69..23426b8ef79 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md @@ -7,11 +7,11 @@ dashedName: step-99 # --description-- -For the third and fourth waypoints, repeat the `transform` pattern once more. +Wiederhole für die dritten und vierten Wegpunkte das `transform`-Muster erneut. # --hints-- -You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. +Du solltest dem `30%`igen Wegpunkt einen `transform` von `rotate(110deg) scaleX(-1)` geben. ```js const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%'); @@ -26,7 +26,7 @@ if (rotateProp && transformProp) { } ``` -You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. +Du solltest dem `40%`igen Wegpunkt einen `transform` von `rotate(130deg) scaleX(-1)` geben. ```js const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md index 486b6fb7511..337cee3988c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md @@ -7,11 +7,11 @@ dashedName: step-100 # --description-- -Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function. +Verwende die `wave`-Animation auf dem linken Arm. Die Animation soll `3s` dauern, unendlich oft wiederholt werden und eine lineare Zeitfunktion haben. # --hints-- -You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`. +Du solltest `.arm.left` einen `animation-name` von `--fcc-expected--` geben, aber fandest `--fcc-actual--`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md index 8e22dab26f3..752a074cfed 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md @@ -11,13 +11,13 @@ Target the `.penguin` element when it is active, and increase its size by `50%` # --hints-- -You should use the `.penguin:active` selector. +Du solltest den `.penguin:active`-Selektor verwenden. ```js assert.match(code, /\.penguin:active\s*\{/); ``` -You should give `.penguin:active` a `transform` of `scale(1.5)`. +Du solltest `.penguin:active` eine `transform` von `scale(1.5)` geben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md index c78eebb3063..58f680cee60 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md @@ -7,13 +7,13 @@ dashedName: step-102 # --description-- -When you activate the `.penguin` element, it might look as though you can drag it around. This is not true. +Wenn du das `.penguin`-Element aktivierst, könnte es so aussehen, als ob du es herumziehen kannst. Das stimmt nicht. -Indicate this to users, by giving the active element a `cursor` property of `not-allowed`. +Gib den Benutzern dies an, indem du dem aktiven Element eine `cursor`-Eigenschaft mit `not-allowed` als Wert gibst. # --hints-- -You should give `.penguin:active` a `cursor` property of `not-allowed`. +Du solltest `.penguin:active` eine `cursor`-Eigenschaft von `not-allowed` haben. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md index 39cb5d294b2..a9c2dd9a3e1 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md @@ -7,13 +7,13 @@ dashedName: step-104 # --description-- -Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element. +Berechne schließlich die `height` des `.ground`-Elements, so dass sie die Höhe des Wegpunktes abzüglich der Höhe des `.penguin`-Elements ergibt. -Congratulations! You have completed the Responsive Web Design certification. +Glückwunsch! Du hast die Responsive Web Design Zertifizierung abgeschlossen. # --hints-- -You should give `.ground` a `height` of `calc(100vh - 300px)`. +Du solltest `.ground` eine `height` von `calc(100vh - 300px)` geben. ```js assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md index d5b8aa9a0fd..780fc9a4f53 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md @@ -7,7 +7,7 @@ dashedName: step-60 # --description-- -Bisher sind alle von dir erstellten Farbverläufe von oben nach unten verlaufen, das ist die Standardrichtung. You can specify another direction by adding it before your colors like this: +Bisher sind alle von dir erstellten Farbverläufe von oben nach unten verlaufen, das ist die Standardrichtung. Du kannst eine andere Richtung angeben, indem du sie wie folgt vor deinen Farben hinzufügst: ```css gradient-type( @@ -17,11 +17,11 @@ gradient-type( ); ``` -Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. +Fülle `.bb3` mit einem `repeating-linear-gradient` aus. Verwende `90deg` für die Richtung, deine `building-color3` für die ersten beiden Farben und `window-color3` bei `15%` für die dritte. Wenn du für eine Farbe keinen Abstand angibst, werden die sinnvollen Werte verwendet. In diesem Fall sind die ersten beiden Farben standardmäßig `0%` und `7.5%`, da sie bei `0%` beginnen und `7.5%` die Hälfte von `15%` ist. # --hints-- -You should give `.bb3` a `background` using `repeating-linear-gradient`. +Du solltest `.bb3` mit `repeating-linear-gradient` einen `background` geben. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); @@ -39,7 +39,7 @@ Du solltest `--building-color3` für die ersten beiden Farben verwenden. assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); ``` -You should use `--window-color3` at `15%` for the third color. +Du solltest bei `15%` `--window-color3` für die dritte Farbe verwenden. ```js assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md index 20515469b6f..9fcce04d71c 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md @@ -7,7 +7,7 @@ dashedName: step-62 # --description-- -The next building will have three sections. Verschachtele drei `div`-Elemente innerhalb von `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. +The next building will have three sections. Verschachtele drei `div`-Elemente innerhalb von `.bb4`. Gib ihnen in dieser Reihenfolge die Klassen `bb4a`, `bb4b` und `bb4c`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md index db71d18e70c..f768a6b53da 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md @@ -7,7 +7,7 @@ dashedName: step-63 # --description-- -Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. +Gib den neuen `div`-Elementen diese `width`- und `height`-Werte: `3 %` und `10 %` zu `.bb4a`, `80 %` und `5 %` zu `.bb4b` und `100 % und 85%` in `.bb4c`. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md index 8ca7ce0c75c..7feda828c79 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md @@ -7,11 +7,11 @@ dashedName: step-65 # --description-- -You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. +Du möchtest, dass `.bb4` die Eigenschaften von `.bb1` teilt, die die Abschnitte zentrieren. Anstatt diesen Code zu duplizieren, erstellst du eine neue Klasse über dem Kommentar zum Erstellen des Hintergrunds mit dem Namen `building-wrap`. Lass es vorerst leer; diese Klasse wird an einigen Stellen verwendet, um dir Codierung zu ersparen. # --hints-- -You should create a new class declaration called `building-wrap`. +Du solltest eine neue Klassendeklaration namens `building-wrap` erstellen. ```js assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md index 119a852b669..1e7e7d269b6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md @@ -7,7 +7,7 @@ dashedName: step-73 # --description-- -Sieht gut aus! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Gib ihnen in dieser Reihenfolge die Klassen `fb1a`, `fb1b` und `fb1c`. +Sieht gut aus! On to the foreground buildings! Verwandele das `.fb1`-Gebäude in drei Abschnitte, indem du drei neue `div`-Elemente darin verschachtelst. Gib ihnen in dieser Reihenfolge die Klassen `fb1a`, `fb1b` und `fb1c`. # --hints-- @@ -23,7 +23,7 @@ Du solltest dem ersten neuen `div` eine Klasse von `fb1a` zuweisen. assert.exists(document.querySelector("div.fb1 > div.fb1a")); ``` -You should give the second new `div` a class of `fb1b`. +Du solltest dem zweiten neuen `div` eine Klasse von `fb1b` geben. ```js assert.exists(document.querySelector("div.fb1 > div.fb1b")); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md index 04331c946cc..a5749448e61 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md @@ -11,7 +11,7 @@ Füge die `building-wrap`-Klasse zum `.fb1`-Element hinzu, um die Abschnitte zu # --hints-- -You should add the class `building-wrap` to `.fb1`. +Du solltest die Klasse `building-wrap` zu `.fb1` hinzufügen. ```js assert.exists(document.querySelector("div.fb1.building-wrap")); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md index 4242e06c678..3910e101087 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md @@ -7,7 +7,7 @@ dashedName: step-106 # --description-- -You don't need the `background-color` for this building anymore so you can remove that property. +Du brauchst die `background-color` für dieses Gebäude nicht mehr, also kannst du diese Eigenschaft entfernen. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md index 5eb9631099d..ff409789135 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md @@ -9,7 +9,7 @@ dashedName: step-77 Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. -Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. +Füge einen `repeating-linear-gradient` zu `.fb1c` mit einem Winkel von `90deg`, deine `--building-color4` von `0%` bis `10%` und `transparent` von `10%` bis `15%` hinzu. # --hints-- @@ -19,19 +19,19 @@ Du solltest `.fb1c` einen `background` mit einem `repeating-linear-gradient` geb assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); ``` -You should use a direction of `90deg`. +Du solltest eine Richtung von `90deg` verwenden. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); ``` -You should use a first color of `--building-color4` from `0%` to `10%`. +Du solltest eine erste Farbe von `--building-color4` von `0%` bis `10%` verwenden. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/); ``` -You should use a second color of `transparent` from `10%` to `15%`. +Du solltest eine zweite Farbe von `transparent` von `10%` bis `15%` verwenden. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md index 41394984a45..25042616cdc 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md @@ -18,7 +18,7 @@ gradient2( ); ``` -Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. +Füge einen `repeating-linear-gradient` zu `.fb1c` unterhalb des vorhandenen hinzu; verwende deine `--building-color4` von `0 %` bis `10 %` und `--window-color4` von <0 >10 % und `90 %`. Dies wird hinter dem zuletzt hinzugefügten Farbverlauf hinzugefügt. # --hints-- @@ -28,11 +28,10 @@ Du solltest den ersten `repeating-linear-gradient` nicht verändern. assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); ``` -You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. +Du solltest einen `repeating-linear-gradient` mit einer ersten Farbe von `--building-color4` von `0 %` bis `10 %< hinzufügen /0>.

-```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/); -``` +
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+`
Du solltest eine zweite Farbe von `--window-color4` von `10%` bis `90%` verwenden. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md index 2bd75f32f26..523352ee667 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md @@ -7,11 +7,11 @@ dashedName: step-111 # --description-- -Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. +Füge `sky` als eine zweite Klasse zum `.background-buildings`-Element hinzu. Du wirst einen Hintergrund für die Skyline erstellen. # --hints-- -You should add a class of `sky` to `.background-buildings`. +Du solltest eine Klasse von `sky` zu `.background-buildings` hinzufügen. ```js assert.exists(document.querySelector("div.background-buildings.sky")); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md index 6946e9d875a..274d4a42317 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md @@ -7,29 +7,29 @@ dashedName: step-112 # --description-- -Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. +Gib der `sky`-Klasse einen `radial-gradient`. Verwende `#ffcf33` von `0%` bis `20%`, `#ffff66` auf `21%` und `#bbeeff` auf `100%`. Dies wird einen kreisförmigen Farbverlauf zum Hintergrund hinzufügen, der deine Sonne sein wird. # --hints-- -You should give `.sky` a `radial-gradient` in the `background` property. +Du solltest `.sky` einen `radial-gradient` in der `background`-Eigenschaft geben. ```js assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); ``` -You should give the `radial-gradient` a first color of `#ffcf33`. +Du solltest dem `radial-gradient` eine erste Farbe von `#ffcf33` geben. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); ``` -You should give the `radial-gradient` a second color of `#ffff66` at `21%`. +Du solltest dem `radial-gradient` bei `21%` eine zweite Farbe `#ffff66` geben. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); ``` -You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. +Du solltest dem `radial-gradient` bei `100%` eine dritte Farbe `#bbeeff` geben. ```js assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md index 1f0593afb91..45f6372a5b8 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md @@ -7,7 +7,7 @@ dashedName: step-113 # --description-- -Füge `circle closest-corner at 15% 15%,` am oberen Rand der Farbverlaufsliste des Himmels hinzu, wo du eine Richtung für den Farbverlauf setzen würdest. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. Dies sind einige Schlüsselwörter, die in Farbverläufe eingebaut werden, um zu beschreiben, wie sie sich verhalten sollen. +Füge `circle closest-corner at 15% 15%,` am oberen Rand der Farbverlaufsliste des Himmels hinzu, wo du eine Richtung für den Farbverlauf setzen würdest. Dadurch wird der Beginn des Farbverlaufs auf `15%` von oben und links verschoben. Er endet dann an der `closest-corner` und er wird eine `circle`-Form beibehalten. Dies sind einige Schlüsselwörter, die in Farbverläufe eingebaut werden, um zu beschreiben, wie sie sich verhalten sollen. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md index d856727d3a7..d1de196f56f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md @@ -7,41 +7,41 @@ dashedName: step-1 # --description-- -HTML elements have opening tags like `

` and closing tags like `

`. +HTML Elemente haben öffnende Tags wie `

` und schließende Tags wie `

`. -The text for an element goes between its opening and closing tags. +Der Text für ein Element gehört zwischen seinen öffnenden und schließenden Tags. -Find the `h1` element and change its text to: +Finde das `h1`-Element und ändere seinen Text zu: `CatPhotoApp` # --hints-- -The text `CatPhotoApp` should be present in the code. You may want to check your spelling. +Der Text `CatPhotoApp` sollte im Code vorhanden sein. Möglicherweise möchtest du deine Rechtschreibung überprüfen. ```js assert(code.match(/catphotoapp/i)); ``` -Your `h1` element should have an opening tag. Opening tags have this syntax: ``. +Dein `h1`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelector('h1')); ``` -Your `h1` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `h1`-Element sollte ein schließendes Tag haben. Schließende Tags haben ein `/` direkt nach dem `<`-Zeichen. ```js assert(code.match(/<\/h1\>/)); ``` -You have more than one `h1` element. Remove the extra `h1` element. +Du hast mehrere `h1`-Elemente. Entferne das zusätzliche `h1`-Element. ```js assert(document.querySelectorAll('h1').length === 1); ``` -Your `h1` element's text should be `CatPhotoApp`. You have either omitted the text, have a typo, or it is not between the `h1` element's opening and closing tags. +Der Text deines `h1`-Elements sollte `CatPhotoApp` sein. Du hast entweder den Text weggelassen, einen Tippfehler gemacht oder es befindet sich nicht zwischen den öffnenden und schließenden Tags des `h1`-Elements. ```js assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md index 2be36565bfa..3955f5d3304 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md @@ -7,25 +7,25 @@ dashedName: step-3 # --description-- -The `p` element is used to create a paragraph of text on websites. Create a `p` element below your `h2` element and give it the following text: +Das `p`-Element wird verwendet, um einen Textabschnitt auf den Webseiten zu erstellen. Erstelle ein `p`-Element unter deinem `h2`-Element und gib ihm den folgenden Text: `See more cat photos in our gallery.` # --hints-- -Your `p` element should have an opening tag. Opening tags have the following syntax: ``. +Dein `p`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben die folgende Syntax: ``. ```js assert(document.querySelector('p')); ``` -Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `p`-Element sollte ein schließendes Tag haben. Schließende Tags haben ein `/` genau nach dem `<`-Zeichen. ```js assert(code.match(/<\/p\>/)); ``` -Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo. +Der Text deines `p`-Elements sollte `See more cat photos in our gallery.` sein Du hast entweder den Text weggelassen oder einen Tippfehler gemacht. ```js const extraSpacesRemoved = document @@ -34,7 +34,7 @@ const extraSpacesRemoved = document assert(extraSpacesRemoved.match(/see more cat photos in our gallery\.?$/i)); ``` -Your `p` element should be below the `h2` element. You have them in the wrong order. +Dein `p`-Element sollte unter dem `h2`-Element stehen. Sie sind in falscher Reihenfolge. ```js const collection = [...document.querySelectorAll('h2,p')].map( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md index 1febd5d4188..f818e40a1d5 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md @@ -7,32 +7,32 @@ dashedName: step-5 # --description-- -HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility. +HTML5 hat einige Elemente, die unterschiedliche Inhaltsbereiche identifizieren. Diese Elemente machen dein HTML leichter lesbar und helfen bei der Suchmaschinenoptimierung (SEO) und der Barrierefreiheit. -Identify the main section of this page by adding a `
` opening tag before the `h1` element, and a `
` closing tag after the `p` element. +Identifiziere den Hauptteil dieser Seite, indem du ein `
` öffnendes Tag vor dem `h1`-Element und ein `
` schließendes Tag nach dem `p`-Element hinzufügst. # --hints-- -Your `main` element should have an opening tag. Opening tags have this syntax: ``. +Dein `main`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelector('main')); ``` -Your `main` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `main`-Element sollte ein schließendes Tag haben. Closing tags have a `/` just after the `<` character. ```js assert(code.match(/<\/main\>/)); ``` -Your `main` element's opening tag should be below the `body` element's opening tag. You have them in the wrong order. +Das öffnende Tag deines `main`-Elements sollte unterhalb des öffnenden Tags des `body`-Elements stehen. Sie sind in falscher Reihenfolge. ```js const main = document.querySelector('main'); assert.equal(main?.previousElementSibling, null); ``` -Das öffnende Tag deines `main`-Elements sollte über dem `h1`-Element stehen. You have them in the wrong order. +Das öffnende Tag deines `main`-Elements sollte über dem `h1`-Element stehen. Sie sind in falscher Reihenfolge. ```js const collection = [...document.querySelectorAll('main,h1')].map( @@ -41,7 +41,7 @@ const collection = [...document.querySelectorAll('main,h1')].map( assert(collection.indexOf('MAIN') < collection.indexOf('H1')); ``` -Your `main` element's closing tag should be below the `p` element. You have them in the wrong order. +Das schließende Tag deines `main`-Elements sollte unter dem `p`-Element stehen. Sie sind in falscher Reihenfolge. ```js const mainNode = document.querySelector('main'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md index 6eff439509e..db14e1eed36 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md @@ -7,13 +7,13 @@ dashedName: step-6 # --description-- -In the previous step, you put the `h1`, `h2`, comment, and `p` elements inside the `main` element. This is called *nesting*. Nested elements should be placed two spaces further to the right of the element they are nested in. This spacing is called indentation and it is used to make HTML easier to read. +In the previous step, you put the `h1`, `h2`, comment, and `p` elements inside the `main` element. Dies nennt man *nesting*. Verschachtelte Elemente sollten zwei Leerzeichen weiter rechts von dem Element, in dem sie verschachtelt sind, platziert werden. Diesen Abstand nennt man Einrückung und wird verwendet, um HTML leichter lesen zu können. -The `h1` element, `h2` element and the comment are indented two spaces more than the `main` element in the code below. Verwende die Leertaste auf deiner Tastatur, um zwei weitere Leerzeichen vor dem `p`-Element hinzuzufügen, so dass es auch richtig eingerückt wird. +Das `h1`-Element, `h2`-Element und der Kommentar sind um zwei Leerzeichen mehr eingerückt als das `main`-Element im folgenden Code. Verwende die Leertaste auf deiner Tastatur, um zwei weitere Leerzeichen vor dem `p`-Element hinzuzufügen, so dass es auch richtig eingerückt wird. # --hints-- -Your code should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed. +Dein Code sollte ein `h2`-Element mit dem Text `Cat Photos` haben. Du hast es wahrscheinlich versehentlich gelöscht, es fehlen sowohl öffnende als auch schließende Tags oder der Text hat sich geändert. ```js assert( @@ -31,25 +31,25 @@ assert( ); ``` -Du solltest nicht die Einrückung in der Zeile mit deinem `h2`-Element ändern. Its opening tag should start 6 spaces over from the start of the line. Du kannst den Schritt neu starten, um die ursprüngliche Einrückung wiederherzustellen. +Du solltest nicht die Einrückung in der Zeile mit deinem `h2`-Element ändern. Das dazugehörige öffnende Tag sollte 6 Leerzeichen vom Anfang der Zeile entfernt beginnen. Du kannst den Schritt neu starten, um die ursprüngliche Einrückung wiederherzustellen. ```js assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}

/)); ``` -Your code should have a comment. You removed the comment from an earlier step. +Dein Code sollte einen Kommentar haben. Du hast den Kommentar aus einem früheren Schritt entfernt. ```js assert(code.match(//)); ``` -The comment's text should be `TODO: Add link to cat photos`. Do not change the text or spacing of the comment. +Der Text deines Kommentars sollte `TODO: Add link to cat photos` sein. Ändere nicht den Text und die Abstände des Kommentars. ```js assert(code.match(//i)); ``` -Du solltest nicht die Einrückung in der Zeile mit deinem Kommentar-Element ändern. Its opening tag should start 6 spaces over from the start of the line. Du kannst den Schritt neu starten, um die ursprüngliche Einrückung wiederherzustellen. +Du solltest nicht die Einrückung in der Zeile mit deinem Kommentar-Element ändern. Das dazugehörige öffnende Tag sollte 6 Leerzeichen vom Anfang der Zeile entfernt beginnen. Du kannst den Schritt neu starten, um die ursprüngliche Einrückung wiederherzustellen. ```js assert( @@ -59,13 +59,13 @@ assert( ); ``` -Your code should have a `p` element. You have removed the `p` element from an earlier step. +Dein Code sollte ein `p`-Element haben. Du hast das `p`-Element aus einem vorherigen Schritt entfernt. ```js assert(document.querySelector('p')); ``` -The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element. +Der Text des `p`-Elements sollte `See more cat photos in our gallery.` sein Ändere nicht den Text, die Abstände oder die Satzzeichen des `p`-Elements. ```js assert( @@ -76,7 +76,7 @@ assert( ); ``` -The opening `p` tag should have indentation that matches your `h2` and comment elements. Its opening tag should start 6 spaces over from the start of the line. +Das öffnende `p`-Tag sollte eine Einrückung enthalten, die mit deinen `h2`- und Kommentar-Elementen übereinstimmt. Das dazugehörige öffnende Tag sollte 6 Leerzeichen vom Anfang der Zeile entfernt beginnen. ```js assert(code.toLowerCase().match(/-->\s*\n\s{6}

/)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md index 76831d24750..1a94b7f6b70 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md @@ -7,31 +7,31 @@ dashedName: step-7 # --description-- -You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a self-closing tag. +Du kannst Bilder zu deiner Webseite hinzufügen, indem du das `img`-Element verwendest. `img`-Elemente haben ein öffnendes Tag, aber kein schließendes Tag. Ein Tag eines Elements ohne ein schließendes Tag wird als self-closing tag bezeichnet. -Add an `img` element below the `p` element. At this point, no image will show up in the browser. +Füge ein `img`-Element unter dem `p`-Element hinzu. An diesem Punkt wird kein Bild im Browser angezeigt. # --hints-- -Your `img` element should have an opening tag. Opening tags have this syntax: ``. +Dein `img`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelector('img')); ``` -Your `img` element should not have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `img`-Element sollte kein schließendes Tag haben. Closing tags have a `/` just after the `<` character. ```js assert(!code.match(/<\/img\>/)); ``` -You should only have one `img` element. Remove any extras. +Du solltest nur ein `img`-Element haben. Entferne alles Zusätzliche. ```js assert(document.querySelectorAll('img').length === 1); ``` -Your `img` element should be below the `p` element. You have them in the wrong order. +Dein `img`-Element sollte unter dem `p`-Element stehen. Sie sind in falscher Reihenfolge. ```js const collection = [...document.querySelectorAll('p,img')].map( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md index 7b9770af530..5062db2d793 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md @@ -7,39 +7,39 @@ dashedName: step-8 # --description-- -HTML attributes are special words used inside the opening tag of an element to control the element's behavior. The `src` attribute in an `img` element specifies the image's URL (where the image is located). +HTML attributes sind spezielle Wörter, die innerhalb des öffnenden Tags eines Elements verwendet werden, um das Verhalten des Elements zu steuern. The `src` attribute in an `img` element specifies the image's URL (where the image is located). -Here is an example of an `img` element with a `src` attribute pointing to the freeCodeCamp logo: +Hier ist ein Beispiel für ein `img`-Element mit einem `src`-Attribut, das auf das freeCodeCamp-Logo verweist: ```html ``` -Inside the existing `img` element, add an `src` attribute with this URL: +Füge innerhalb des vorhandenen `img`-Elements ein `src`-Attribut mit dieser URL hinzu: `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg` # --hints-- -Your code should have an `img` element. You may have removed the `img` element or you have not surrounded the `src` attribute's value with quotes. +Dein Code sollte ein `img`-Element enthalten. Möglicherweise hast du das `img`-Element entfernt oder die `src`-Attributwerte nicht mit Anführungszeichen umgeben. ```js assert(document.querySelector('img')); ``` -Your `img` element should have an `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name. +Dein `img`-Element sollte ein `src`-Attribut enthalten. Du hast entweder das Attribut weggelassen oder einen Tippfehler gemacht. Stelle sicher, dass zwischen dem Namen des Elements und dem Namen des Attributs ein Leerzeichen vorhanden ist. ```js assert(document.querySelector('img').src); ``` -Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important. +Das `src`-Attribut deines `img`-Elements sollte auf '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`' gesetzt sein. Du hast entweder die URL weggelassen oder einen Tippfehler gemacht. Die Groß- und Kleinschreibung der URL ist wichtig. ```js assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg'); ``` -Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. +Obwohl du die `src` des `img`-Elements auf die richtige URL gesetzt hast, wird empfohlen, die Werte eines Attributs immer zwischen Anführungszeichen zu schreiben. ```js assert(!/\` has an `alt` attribute with the text `A cat`. +Alle `img`-Elemente sollten ein `alt`-Attribut haben. Der Text des `alt`-Attributs wird für Screenreader verwendet, um die Zugänglichkeit zu verbessern und wird angezeigt, wenn das Bild nicht geladen wird. Zum Beispiel hat `A cat` ein `alt`-Attribut mit dem Text `A cat`. -Inside the `img` element, add an `alt` attribute with this text: +Füge in dem `img`-Element ein `alt`-Attribut mit diesem Text hinzu: `A cute orange cat lying on its back` # --hints-- -Your code should have an `img` element. You removed the `img` element from an earlier step. +Dein Code sollte ein `img`-Element haben. Du hast das `img`-Element aus einem vorherigen Schritt entfernt. ```js assert(document.querySelector('img')); ``` -Your `img` element does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. +Dein `img`-Element hat kein `alt`-Attribut. Überprüfe, ob nach dem Namen des öffnenden Tags ein Leerzeichen steht und/oder ob vor allen Attributnamen Leerzeichen stehen. ```js assert(document.querySelector('img').hasAttribute('alt')); ``` -Your `img` element's `alt` attribute value is set to something other than 'A cute orange cat lying on its back'. Make sure the `alt` attribute's value is surrounded with quotation marks. +Der `alt`-Attributwert deines `img`-Elements ist auf etwas anderes als 'Eine süße orangefarbene Katze liegt auf ihrem Rücken' gesetzt. Stelle sicher, dass der Wert des `alt`-Attributs zwischen Anführungszeichen steht. ```js const altText = document diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md index 3cd0612cc5d..782cce79549 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md @@ -7,25 +7,25 @@ dashedName: step-10 # --description-- -You can link to another page with the anchor (`a`) element. For example, `` would link to `freecodecamp.org`. +Mit dem (`a`)-Ankerelement kannst du auf eine andere Seite verlinken. Zum Beispiel würde `` auf `freecodecamp.org` verlinken. -Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview. +Füge ein Ankerelement nach dem Absatz, der auf `https://freecatphotoapp.com` verlinkt, hinzu. An dieser Stelle wird der Link nicht in der Vorschau erscheinen. # --hints-- -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. +Dein (`a`)-Ankerelement sollte ein öffnendes Tag haben. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelector('a')); ``` -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein (`a`)-Ankerelement sollte ein schließendes Tag haben. Schließende Tags haben ein `/` genau nach dem `<`-Zeichen. ```js assert(code.match(/<\/a\>/)); ``` -Your anchor (`a`) element should be below the `p` element. You have them in the wrong order. +Dein (`a`)-Ankerelement sollte unter dem `p`-Element stehen. Sie sind in falscher Reihenfolge. ```js const collection = [...document.querySelectorAll('a, p')].map( @@ -34,13 +34,13 @@ const collection = [...document.querySelectorAll('a, p')].map( assert(collection.indexOf('P') < collection.indexOf('A')); ``` -Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. +Dein (`a`)-Element hat kein `href`-Attribut. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. ```js assert(document.querySelector('a').hasAttribute('href')); ``` -Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. +Your anchor (`a`) element should link to `https://freecatphotoapp.com`. Du hast entweder die URL weggelassen oder einen Tippfehler gemacht. ```js assert( @@ -49,7 +49,7 @@ assert( ); ``` -Although you have set the anchor ('a') element's `href` attribute to the correct link, it is recommended to always surround the value of an attribute with quotation marks. +Obwohl du das `href`-Attribut des ('a') Ankerelements auf den richtigen Link gesetzt hast, wird empfohlen, die Werte eines Attributs immer zwischen Anführungszeichen zu schreiben. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md index 309b6307eaf..22244007e8d 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md @@ -7,25 +7,25 @@ dashedName: step-11 # --description-- -A link's text must be placed between the opening and closing tags of an anchor (`a`) element. For example, `click here to go to freeCodeCamp.org` is a link with the text `click here to go to freeCodeCamp.org`. +Der Text eines Links muss zwischen den öffnenden und schließenden Tags eines Ankerelements (`a`) platziert werden. Zum Beispiel ist `click here to go to freeCodeCamp.org` ein Link mit dem Text `click here to go to freeCodeCamp.org`. -Add the anchor text `link to cat pictures` to the anchor element. This will become the link's text. +Füge den Ankertext `link to cat pictures` zum Ankerelement hinzu. Dies wird der Text des Links sein. # --hints-- -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. +Dein (`a`)-Ankermelement sollte ein öffnendes Tag haben. Öffnende Tags haben folgende Syntax: ``. ```js assert(document.querySelector('a')); ``` -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein (`a`)-Ankerelement sollte ein schließendes Tag haben. Schließende Tags haben ein `/` direkt nach dem `<`-Zeichen. ```js assert(code.match(/<\/a\>/)); ``` -Your anchor (`a`) element's text should be `link to cat pictures`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag. +Der Text deines (`a`)-Ankerelements sollte `link to cat pictures` sein. Stelle sicher, dass der Linktext des (`a`)-Ankerelements zwischen dem öffnenden und schließenden Tag liegt. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md index 2187dadb785..3c100b9c963 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md @@ -7,9 +7,9 @@ dashedName: step-12 # --description-- -In the previous step you turned the words `link to cat pictures` into a link by placing them between opening and closing anchor (`a`) tags. You can do the same to words inside of an element, such as a `p` element. +Im vorherigen Schritt hast du die Wörter `link to cat pictures` in einen Link verwandelt, indem du die Wörter zwischen einem öffnenden und schließenden (`a`)-Ankertag platziert hast. Dasselbe gilt für Wörter innerhalb eines Elements, z. B. eines `p`-Elements. -In the text of your `p` element, turn the words `cat photos` into a link to `https://freecatphotoapp.com` by adding opening and closing anchor (`a`) tags around these words. +Verwandle im Text deines `p`-Elements die Wörter `cat photos` in einen Link zu `https://freecatphotoapp.com`, indem du öffnende und schließende (`a`)-Ankertags um diese Wörter hinzufügst. # --hints-- @@ -20,7 +20,7 @@ You should nest a new anchor (`a`) element within the `p` element. assert($('p > a').length); ``` -The link's `href` value should be `https://freecatphotoapp.com`. You have either omitted the `href` value or have a typo. +Der `href`-Wert des Links sollte `https://freecatphotoapp.com` sein. Du hast entweder den `href`-Wert weggelassen oder einen Tippfehler gemacht. ```js const nestedAnchor = $('p > a')[0]; @@ -29,7 +29,7 @@ assert( ); ``` -The link's text should be `cat photos`. You have either omitted the text or have a typo. +Der Linktext sollte `cat photos` sein. Du hast entweder den Text weggelassen oder einen Tippfehler gemacht. ```js const nestedAnchor = $('p > a')[0]; @@ -38,7 +38,7 @@ assert( ); ``` -After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element. +Nachdem das (`a`)-Ankerelement eingebettet wurde, sollte der einzige sichtbare `p`-Elementinhalt im Browser `See more cat photos in our gallery.` sein. Überprüfe den Text, die Abstände oder die Satzzeichen des `p`s und des eingebetteten Ankerelements. ```js const pText = document diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md index d45ca06a567..a1cd9e3cc0f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md @@ -7,13 +7,13 @@ dashedName: step-15 # --description-- -In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags. +In den vorherigen Schritten hast du ein Ankerelement verwendet, um Text in einen Link zu umwandeln. Auch andere Arten von Inhalten können in einen Link umgewandelt werden, indem sie mit Anker-Tags umschlossen werden. -Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value. +Umwandle das Bild in einen Link, indem du es mit den notwendigen Tags der Elemente umgibst. Verwende `https://freecatphotoapp.com` als den `href`-Attributwert des Ankers. # --hints-- -You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it. +Du solltest ein `img`-Element mit einem `src`-Wert von `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg` haben. Möglicherweise hast du es versehentlich gelöscht. ```js assert( @@ -29,31 +29,31 @@ Your anchor (`a`) element should have an opening tag. Opening tags have this syn assert(document.querySelectorAll('a').length >= 2); ``` -You should only add one opening anchor (`a`) tag. Please remove any extras. +Du solltest nur ein einleitendes (`a`)-Ankertag hinzufügen. Entferne bitte alles Zusätzliche. ```js assert(document.querySelectorAll('a').length === 2); ``` -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein (`a`)-Ankerelement sollte ein schließendes Tag haben. Closing tags have a `/` just after the `<` character. ```js assert(code.match(/<\/a>/g).length >= 2); ``` -You should only add one closing anchor (`a`) tag. Please remove any extras. +Du solltest nur ein schließendes (`a`)-Ankertag hinzufügen. Please remove any extras. ```js assert(code.match(/<\/a>/g).length === 2); ``` -Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. +Dein (`a`)-Ankerelement hat kein `href`-Attribut. Überprüfe, ob ein Leerzeichen nach dem Namen des öffnenden Tags und/oder Leerzeichen vor allen Attributnamen vorhanden sind. ```js assert(document.querySelector('a').hasAttribute('href')); ``` -Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. +Dein (`a`)-Ankerelement sollte auf `https://freecatphotoapp.com` verlinken. Du hast entweder die URL weggelassen oder einen Tippfehler gemacht. ```js assert( @@ -62,7 +62,7 @@ assert( ); ``` -Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element. +Dein `img`-Element sollte innerhalb deines (`a`)-Ankerelements verschachtelt sein. Das gesamte `img`-Element sollte sich innerhalb der einleitenden und schließenden Tags des (`a`)-Ankerelements befinden. ```js assert(document.querySelector('img').parentNode.nodeName === 'A'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md index 480db7d1973..c9e3ac73e52 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md @@ -7,11 +7,11 @@ dashedName: step-18 # --description-- -Within the second `section` element, add a new `h2` element with the text `Cat Lists`. +Füge innerhalb des zweiten `section`-Elements ein neues `h2`-Element mit dem Text `Cat Lists` hinzu. # --hints-- -Your `section` element should have an opening tag. Opening tags have this syntax: ``. +Dein `section`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese Syntax: ``. ```js assert( @@ -20,26 +20,26 @@ assert( ); ``` -Your `h2` element should have an opening tag. Opening tags have this syntax: ``. +Dein `h2`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelectorAll('h2').length === 2); ``` -Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `h2`-Element sollte ein schließendes Tag haben. Closing tags have a `/` just after the `<` character. ```js assert(code.match(/<\/h2\>/g).length === 2); ``` -Your second `h2` element should be right above the second `section` element's closing tag. It is not in the correct position. +Your second `h2` element should be right above the second `section` element's closing tag. Es ist nicht in der richtigen Position. ```js const secondSection = document.querySelectorAll('section')[1]; assert(secondSection.lastElementChild.nodeName === 'H2'); ``` -The second `h2` element should have the text `Cat Lists`. You have either omitted the text or have a typo. +Das zweite `h2`-Element sollte den Text `Cat Lists` haben. Du hast entweder den Text weggelassen oder einen Tippfehler gemacht. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md index f404e109bb7..88d2fadcf9e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md @@ -7,7 +7,7 @@ dashedName: step-19 # --description-- -When you add a lower rank heading element to the page, it's implied that you're starting a new subsection. +Wenn du ein untergeordnetes Überschriftenelement zur Seite hinzufügst, wird angedeutet, dass du einen neuen Unterabschnitt beginnst. After the last `h2` element of the second `section` element, add an `h3` element with this text: @@ -15,7 +15,7 @@ After the last `h2` element of the second `section` element, add an `h3` element # --hints-- -The second `section` element appears to be missing or does not have both an opening and closing tag. +Das zweite `section`-Element scheint zu fehlen oder es hat kein öffnendes und schließendes Tag. ```js assert( @@ -24,7 +24,7 @@ assert( ); ``` -There should be an `h3` element right above the second `section` element's closing tag. +Es sollte ein `h3`-Element direkt über dem schließenden Tag des zweiten `section`-Elements geben. ```js assert( @@ -33,7 +33,7 @@ assert( ); ``` -The `h3` element right above the second `section` element's closing tag should have the text `Things cats love:`. Make sure to include the colon at the end of the text. +Das `h3`-Element genau über dem schließenden Tags des zweiten `section`-Elements sollte den Text `Things cats love:` haben. Stelle sicher, dass der Doppelpunkt am Ende des Textes eingefügt wurde. ```js assert( @@ -44,7 +44,7 @@ assert( ); ``` -There should be an `h2` element with the text `Cat Lists` above the last `h3` element that is nested in the last `section` element'. You may have accidentally deleted the `h2` element. +Es sollte ein `h2`-Element mit dem Text `Cat Lists` oberhalb des letzten `h3`-Elements geben, das im letzten `section`-Element eingebettet wurde. Möglicherweise hast du versehentlich das `h2`-Element gelöscht. ```js const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md index 70777eff89f..faf26389603 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md @@ -7,23 +7,23 @@ dashedName: step-20 # --description-- -After the `h3` element with the `Things cats love:` text, add an unordered list (`ul`) element. Note that nothing will be displayed at this point. +Füge nach dem `h3`-Element mit dem `Things cats love:` Text ein ungeordnetes (`ul`)-Listenelement hinzu. Beachte, dass an diesem Punkt nichts angezeigt wird. # --hints-- -Your `ul` element should have an opening tag. Opening tags have this syntax: ``. +Dein `ul`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelector('ul')); ``` -Your `ul` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `ul`-Element sollte ein schließendes Tag haben. Schließende Tags haben ein `/` direkt nach dem `<`-Zeichen. ```js assert(code.match(/<\/ul>/)); ``` -The `ul` element should be above the second `section` element's closing tag. +Das `ul`-Element sollte über dem schließenden Tag des `section`-Elements stehen. ```js const secondSectionLastElemNode = $('main > section')[1].lastElementChild; diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md index 5f670cb6603..b8eca5819c9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md @@ -29,7 +29,7 @@ Das neue Bild besitzt kein `alt`-Attribut. Überprüfe, ob nach dem Namen des ö assert($('section')[1].lastElementChild.hasAttribute('alt')); ``` -The new image should have an `alt` value of `A slice of lasagna on a plate.` Make sure the `alt` attribute's value is surrounded with quotation marks. +Das neue Bild sollte `A slice of lasagna on a plate.` als `alt`-Wert enthalten. Stelle sicher, dass der Wert des `alt`-Attributs in Anführungszeichen gesetzt wird. ```js assert( @@ -46,7 +46,7 @@ Das neue Bild besitzt kein `src`-Attribut. Überprüfe, ob nach dem Namen des ö assert($('section')[1].lastElementChild.hasAttribute('src')); ``` -The new image should have an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. Stelle sicher, dass der Wert des `src`-Attributs in Anführungzeichen gesetzt wird. +Das neue Bild sollte `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg` als `src`-Wert enthalten. Stelle sicher, dass der Wert des `src`-Attributs in Anführungzeichen gesetzt wird. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md index e380d575043..bdaf7fd8f2b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md @@ -7,27 +7,27 @@ dashedName: step-24 # --description-- -A figure caption (`figcaption`) element is used to add a caption to describe the image contained within the `figure` element. For example, `

A cute cat
` adds the caption `A cute cat`. +Ein (`figcaption`)-Element für die Beschriftung der Abbildung wird verwendet, um eine Beschriftung hinzuzufügen, die das Bild im `figure`-Element beschreibt. Zum Beispiel fügt `
A cute cat
` die Beschriftung `A cute cat` hinzu. -After the image nested in the `figure` element, add a `figcaption` element with text set to: +Füge nach dem im `figure`-Element eingebetteten Bild ein `figcaption`-Element mit Text hinzu: `Cats love lasagna.` # --hints-- -Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. +Dein `figcaption`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben die folgende Syntax: ``. ```js assert(document.querySelector('figcaption')); ``` -Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `figcaption`-Element sollte ein schließendes Tag haben. Schließende Tags haben ein `/` genau nach dem `<`-Zeichen. ```js assert(code.match(/<\/figcaption\>/)); ``` -The `figcaption` element should be nested in the `figure` element. +Das `figcaption`-Element sollte im `figure`-Element eingebettet sein. ```js assert( @@ -36,7 +36,7 @@ assert( ); ``` -The lasagna `img` element should be nested in the `figure` element. +Das `img`-Lasagna-Element sollte in dem `figure`-Element eingebettet sein. ```js assert( @@ -46,7 +46,7 @@ assert( ); ``` -The `figcaption` element nested in the `figure` element should be below the `img` element. You have them in the wrong order. +Das `figcaption`-Element, das im `figure`-Element eingebettet wurde, sollte über dem `img`-Element stehen. Sie sind in falscher Reihenfolge. ```js assert( @@ -54,7 +54,7 @@ assert( ); ``` -Your `figcaption` element's text should be `Cats love lasagna.` You have either omitted the text or have a typo. +Der Text deines `figcaption`-Elements sollte `Cats love lasagna.` sein Du hast entweder den Text weggelassen oder einen Tippfehler gemacht. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md index 0773850afd9..b7d85451686 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md @@ -11,25 +11,25 @@ Emphasize the word `love` in the `figcaption` element by wrapping it in an empha # --hints-- -Your emphasis `em` element should have an opening tag. Opening tags have this syntax: ``. +Dein `em`-Betonungselement sollte ein öffnendes Tag haben. Öffnende Tags haben folgende Syntax: ``. ```js assert(document.querySelector('em')); ``` -Your emphasis `em` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `em`-Betonungselement sollte ein schließendes Tag haben. Closing tags have a `/` just after the `<` character. ```js assert(code.match(/<\/em\>/)); ``` -You have either deleted the `figcaption` element or it is missing an opening or closing tag. +Du hast entweder das `figcaption` Element gelöscht oder es fehlt ein öffnendes oder schließendes Tag. ```js assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/)); ``` -Your emphasis `em` element should surround the text `love`. You have either omitted the text or have a typo. +Your emphasis `em` element should surround the text `love`. Du hast entweder den Text weggelassen oder einen Tippfehler gemacht. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md index 712d869b023..dbaedc0f6e2 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md @@ -33,7 +33,7 @@ assert( ); ``` -There should be a `figure` above the new `h3` element. Möglicherweise hast du versehentlich das `figure`-Element gelöscht. +Es sollte ein `figure`-Element oberhalb des neuen `h3`-Elements geben. Möglicherweise hast du versehentlich das `figure`-Element gelöscht. ```js const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md index 8cfd0aae2ba..fe3784642bd 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md @@ -7,7 +7,7 @@ dashedName: step-27 # --description-- -The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. +Der Code für eine geordnete Liste (`ol`) ist einer ungeordneten Liste ähnlich, nur dass die Listenelemente in einer geordneten Liste nummeriert werden, wenn sie angezeigt werden. After the second `section` element's last `h3` element, add an ordered list with these three list items: @@ -15,7 +15,7 @@ After the second `section` element's last `h3` element, add an ordered list with # --hints-- -Your `ol` element should have an opening tag. Opening tags have this syntax: ``. +Your `ol` element should have an opening tag. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelector('ol')); @@ -27,7 +27,7 @@ Your `ol` element should have a closing tag. Closing tags have a `/` just after assert(code.match(/<\/ol>/)); ``` -The `ol` element should be above the second `section` element's closing tag. You have them in the wrong order. +The `ol` element should be above the second `section` element's closing tag. Sie sind in falscher Reihenfolge. ```js assert($('main > section')[1].lastElementChild.nodeName === 'OL'); @@ -55,7 +55,7 @@ assert.deepStrictEqual( ); ``` -You should only have one `ol` element. +Du solltest nur ein `ol`-Element haben. ```js assert([...document.querySelectorAll('ol')].length == 1); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md index 3a844619a76..6d0e500350f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md @@ -7,17 +7,17 @@ dashedName: step-28 # --description-- -After the ordered list, add another `figure` element. +Füge nach der geordneten Liste ein weiteres `figure`-Element hinzu. # --hints-- -Your `figure` element should have an opening tag. Opening tags have this syntax: ``. +Your `figure` element should have an opening tag. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelectorAll('figure').length === 2); ``` -Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. +Dein `figure` sollte ein schließendes Tag haben. Schließende Tags haben ein `/` direkt nach dem `<` Zeichen. ```js assert(code.match(/<\/figure>/g).length === 2); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md index 905f2dc76da..5e462f3a457 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md @@ -7,7 +7,7 @@ dashedName: step-34 # --description-- -Inside the third `section` element, add an `h2` element with the text: +Füge innerhalb des dritten `section`-Elements ein `h2`-Element mit dem Text hinzu: `Cat Form` @@ -22,7 +22,7 @@ assert( ); ``` -Your `h2` element should have an opening tag and closing tag. You may be missing one or both of the required tags. +Your `h2` element should have an opening tag and closing tag. Möglicherweise fehlt einer oder beide erforderlichen Tags. ```js assert( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md index dee04434117..3d5a63331b0 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md @@ -7,13 +7,13 @@ dashedName: step-35 # --description-- -Now you will add a web form to collect information from users. +Nun wirst du ein Webformular hinzufügen, um Informationen von Benutzern zu sammeln. After the `Cat Form` heading, add a `form` element. # --hints-- -Your `form` element should have an opening tag and closing tag. You may be missing one or both of the required tags, or have them in the wrong order. +Your `form` element should have an opening tag and closing tag. Es kann sein, dass eine oder beide der erforderlichen Tags fehlen oder in der falschen Reihenfolge liegen. ```js assert(document.querySelector('form') && code.match(/<\/form>/g)); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md index ad91a5ed124..44fa7c1aeb0 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -The `action` attribute indicates where form data should be sent. For example, `
` tells the browser that the form data should be sent to the path `/submit-url`. +The `action` attribute indicates where form data should be sent. Zum Beispiel teilt `
` dem Browser mit, dass die Formulardaten an den Pfad `/submit-url` gesendet werden sollten. Add an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo` to the `form` element. @@ -36,7 +36,7 @@ Your `form` element should have no content. Remove any HTML elements or text bet assert($('form')[0].innerHTML.trim().length === 0); ``` -Your `form` element does not have an `action` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. +Your `form` element does not have an `action` attribute. Überprüfe, ob ein Leerzeichen nach dem Namen des öffnenden Tags und/oder Leerzeichen vor allen Attributnamen vorhanden sind. ```js const form = document.querySelector('form'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md index dc08b16f438..3617eda3973 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md @@ -24,13 +24,13 @@ assert( ); ``` -Your `form` element's opening tag should only have an `action` attribute. Remove anything else you may have typed in it. +Your `form` element's opening tag should only have an `action` attribute. Entferne alles andere, was du möglicherweise eingegeben hast. ```js assert([...document.querySelector('form').attributes].length < 2); ``` -You should create an `input` element. Check the syntax. +You should create an `input` element. Überprüfe die Syntax. ```js assert(document.querySelector('input')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md index fe5a95d881f..07ce382a0de 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md @@ -7,13 +7,13 @@ dashedName: step-42 # --description-- -Use the `button` element to create a clickable button. For example, `` creates a button with the text `Click Here`. +Use the `button` element to create a clickable button. Zum Beispiel erstellt `` eine Schaltfläche mit dem Text `Click Here`. Add a `button` element with the text `Submit` below the `input` element. The default behavior of clicking a form button without any attributes submits the form to the location specified in the form's `action` attribute. # --hints-- -Your `button` element should have an opening tag. Opening tags have this syntax: ``. +Dein `button`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben diese Syntax: ``. ```js assert(document.querySelector('button')); @@ -25,13 +25,13 @@ Your `button` element should have a closing tag. Closing tags have a `/` just af assert(code.match(/<\/button\>/)); ``` -Your `button` element's text should be `Submit`. You have either omitted the text or have a typo. +Your `button` element's text should be `Submit`. Du hast entweder den Text weggelassen oder einen Tippfehler gemacht. ```js assert(document.querySelector('button').innerText.toLowerCase() === 'submit'); ``` -Your `button` element should be below the `input` element. You have them in the wrong order. +Your `button` element should be below the `input` element. Sie sind in falscher Reihenfolge. ```js const collection = [...document.querySelectorAll('input, button')].map( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md index e5d76089e91..16fd624edf7 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md @@ -11,7 +11,7 @@ To prevent a user from submitting your form when required information is missing # --hints-- -You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. +You have either deleted your `input` element or it has invalid syntax. Alle Attributwerte sollten zwischen Anführungszeichen stehen. ```js assert($('input').length); @@ -26,7 +26,7 @@ assert( ); ``` -Your `input` element should have a `required` attribute. Remember, you just add the word `required` inside the `input` element's tag. +Dein `input`-Element sollte das `required`-Attribut besitzen. Remember, you just add the word `required` inside the `input` element's tag. ```js assert($('input')[0].hasAttribute('required')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md index c37b1e118c6..5fd2467e876 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md @@ -7,7 +7,7 @@ dashedName: step-44 # --description-- -You can use radio buttons for questions where you want only one answer out of multiple options. +Du kannst Optionsschaltflächen für Fragen verwenden, bei denen du nur eine Antwort aus mehreren Optionen möchtest. Here is an example of a radio button with the option of `cat`: ` cat`. Remember that `input` elements are self-closing. @@ -17,7 +17,7 @@ Before the text input, add a radio button with the option set as: # --hints-- -You should create an `input` element for your radio button. Check the syntax. +You should create an `input` element for your radio button. Überprüfe die Syntax. ```js assert($('form > input').length >= 2); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index 906dfd8ddd0..c28d10c43c6 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -61,6 +61,12 @@ Your third `td` element should have the text `$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-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index f9c79cdfad3..caca016ceca 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -61,6 +61,12 @@ Il terzo elemento `td` dovrebbe avere il testo `$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-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index ecd638aa5a6..063dddb97ab 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -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-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index 04ca7f80d9d..210bd35caaa 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,7 +9,7 @@ dashedName: step-8 Uma propriedade útil de um _SVG_ (gráficos vetoriais escaláveis) é o atributo `path` (caminho), que permite que a imagem seja dimensionada sem afetar a resolução da imagem resultante. -Atualmente, o `img` está assumindo que é o tamanho padrão, o que é muito grande. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: +Atualmente, o `img` está assumindo que é o tamanho padrão, o que é muito grande. O CSS tem uma função `max`, que retorna o maior valor de um conjunto de valores separados por vírgulas. Por exemplo: ```css img { @@ -17,19 +17,19 @@ img { } ``` -In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. +Neste exemplo, os elementos `img` terão uma largura mínima de `250px`. À medida que a viewport crescer, a imagem crescerá em conformidade de maneira a ser 25% da largura da viewport. -Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. +Dimensione a imagem usando `id` como seletor e definindo a `width` como sendo, no máximo, `100px` ou `18vw`. # --hints-- -You should use the `#logo` selector to target the `img` element. +Você deve usar o seletor `#logo` para marcar o elemento `img`. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); ``` -You should give the `img` a `width` of `max(100px, 18vw)`. +Você deve dar à `img` uma `width` de `max(100px, 18vw)`. ```js assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md index 25639bdae55..281c3382715 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md @@ -9,7 +9,7 @@ dashedName: step-13 # --description-- -Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. +Use o seletor `>` para marcar os elementos da lista não ordenada dentro dos elementos `nav` e use _Flexbox_ para espaçar igualmente os elementos filhos. # --hints-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md index f74e6062cff..4ff162d2e9f 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md @@ -7,7 +7,7 @@ dashedName: step-36 # --description-- -Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text. +Dentro dos elementos `div.question-block`, aninhe um elemento `label` e adicione uma questão relacionada ao `CSS` ao elemento `label`. # --hints-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index d4a89ea188c..50e702fbf4e 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -61,6 +61,12 @@ O terceiro elemento `td` deve ter o texto `$809`. assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809'); ``` +O terceiro elemento `td` deve ter o atributo `class` definido como `current`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + # --seed-- ## --seed-contents-- diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index 99ed9c1d2d9..f137af3e153 100644 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -61,6 +61,12 @@ Kipengele chako cha tatu cha `td` kinapaswa kuwa na maandishi `$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-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md index 43424a2f6a9..cff6cae7604 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -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-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-1-to-100/problem-58-spiral-primes.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-1-to-100/problem-58-spiral-primes.md index 64cc15bdd39..4cd7af22026 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-1-to-100/problem-58-spiral-primes.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-1-to-100/problem-58-spiral-primes.md @@ -22,7 +22,7 @@ dashedName: problem-58-spiral-primes Цікаво відзначити, що непарні квадрати лежать уздовж нижньої правої діагоналі, але цікавішим є те, що 8 з 13 чисел, які лежать уздовж обох діагоналей, є простими; тобто співвідношення дорівнює 8/13 ≈ 62%. -Якщо до спіралі, зображеної вище, додати один новий шар, утвориться квадратна спіраль із довжиною сторони 9. Якщо цей процес продовжити, якою буде довжина сторони квадратної спіралі, для якої відсоток простих чисел уздовж обох діагоналей спочатку впаде нижче `percent`? +Якщо до спіралі, зображеної вище, додати один новий шар, утвориться квадратна спіраль із довжиною сторони 9. Якщо цей процес продовжити, якою буде довжина сторони квадратної спіралі, для якої відсоток простих чисел уздовж обох діагоналей буде меншим за `percent`? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-121-disc-game-prize-fund.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-121-disc-game-prize-fund.md index 70647887d34..eef2ed46bce 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-121-disc-game-prize-fund.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-121-disc-game-prize-fund.md @@ -1,6 +1,6 @@ --- id: 5900f3e51000cf542c50fef8 -title: 'Problem 121: Disc game prize fund' +title: 'Завдання 121: призовий фонд гри з дисками' challengeType: 1 forumTopicId: 301748 dashedName: problem-121-disc-game-prize-fund @@ -8,13 +8,13 @@ dashedName: problem-121-disc-game-prize-fund # --description-- -A bag contains one red disc and one blue disc. In a game of chance a player takes a disc at random and its colour is noted. After each turn the disc is returned to the bag, an extra red disc is added, and another disc is taken at random. +У торбі лежать один червоний диск і один синій диск. У грі на вдачу гравець навмання дістає один диск і записує його колір. Після кожного ходу диск повертається в торбу, куди додається ще один червоний диск, і знову потрібно навмання дістати інший диск. -The player pays £1 to play and wins if they have taken more blue discs than red discs at the end of the game. +Гравець платить £1 за гру і виграє, якщо до кінця гри дістає більше синіх дисків, ніж червоних. -If the game is played for four turns, the probability of a player winning is exactly 11/120, and so the maximum prize fund the banker should allocate for winning in this game would be £10 before they would expect to incur a loss. Note that any payout will be a whole number of pounds and also includes the original £1 paid to play the game, so in the example given the player actually wins £9. +Якщо гра складається з чотирьох ходів, ймовірність виграшу для гравця становить 11/120, тому максимальний призовий фонд в цьому випадку повинен складати £10, щоб не зазнати збитків. Зверніть увагу, що будь-яка виплата проводиться цілим числом фунтів стерлінгів, а також містить вартість гри в розмірі £1, тому в прикладі гравець насправді виграє £9. -Find the maximum prize fund that should be allocated to a single game in which fifteen turns are played. +Знайдіть максимальний призовий фонд, який треба виділити для однієї гри з п’ятнадцятьма ходами. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md index c5c4269968f..a165013c7c8 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-122-efficient-exponentiation.md @@ -1,6 +1,6 @@ --- id: 5900f3e61000cf542c50fef9 -title: 'Problem 122: Efficient exponentiation' +title: 'Завдання 122: ефективний метод піднесення до степеня' challengeType: 1 forumTopicId: 301749 dashedName: problem-122-efficient-exponentiation @@ -8,26 +8,26 @@ dashedName: problem-122-efficient-exponentiation # --description-- -The most naive way of computing $n^{15}$ requires fourteen multiplications: +Найпростіший спосіб обчислення $n^{15}$ вимагає виконання чотирнадцяти множень: $$n × n × \ldots × n = n^{15}$$ -But using a "binary" method you can compute it in six multiplications: +Якщо скористатися «бінарним» методом, потрібно шість множень: $$\begin{align} & n × n = n^2\\\\ & n^2 × n^2 = n^4\\\\ & n^4 × n^4 = n^8\\\\ & n^8 × n^4 = n^{12}\\\\ & n^{12} × n^2 = n^{14}\\\\ & n^{14} × n = n^{15} \end{align}$$ -However it is yet possible to compute it in only five multiplications: +Проте кількість множень можна зменшити до п’яти: $$\begin{align} & n × n = n^2\\\\ & n^2 × n = n^3\\\\ & n^3 × n^3 = n^6\\\\ & n^6 × n^6 = n^{12}\\\\ & n^{12} × n^3 = n^{15} \end{align}$$ -We shall define $m(k)$ to be the minimum number of multiplications to compute $n^k$; for example $m(15) = 5$. +Визначаємо $m(k)$ як мінімальну кількість множень для обчислення $n^k$. Наприклад, $m(15) = 5$. -For $1 ≤ k ≤ 200$, find $\sum{m(k)}$. +Знайдіть $\sum{m(k)}$ за умови $1 ≤ k ≤ 200$. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-123-prime-square-remainders.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-123-prime-square-remainders.md index 3ec2475377c..17d8b48bcef 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-123-prime-square-remainders.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-123-prime-square-remainders.md @@ -1,6 +1,6 @@ --- id: 5900f3e71000cf542c50fefa -title: 'Problem 123: Prime square remainders' +title: 'Завдання 123: прості квадратні остачі' challengeType: 1 forumTopicId: 301750 dashedName: problem-123-prime-square-remainders @@ -8,13 +8,13 @@ dashedName: problem-123-prime-square-remainders # --description-- -Let $p_n$ be the $n$th prime: 2, 3, 5, 7, 11, ..., and let $r$ be the remainder when ${(p_n−1)}^n + {(p_n+1)}^n$ is divided by ${p_n}^2$. +Нехай $p_n$ є $n$-ним простим числом: 2, 3, 5, 7, 11, ..., а $r$ є остачею від ділення ${(p_n−1)}^n + {(p_n+1)}^n$ на ${p_n}^2$. -For example, when $n = 3, p_3 = 5$, and $4^3 + 6^3 = 280 ≡ 5\\ mod\\ 25$. +Наприклад, коли $n = 3, p_3 = 5$ і $4^3 + 6^3 = 280 ≡ 5\\ mod\\ 25$. -The least value of $n$ for which the remainder first exceeds $10^9$ is 7037. +Найменше значення $n$, за якого остача перевищує $10^9$, становить 7037. -Find the least value of $n$ for which the remainder first exceeds $10^{10}$. +Знайдіть найменше значення $n$, за якого остача перевищує $10^{10}$. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-124-ordered-radicals.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-124-ordered-radicals.md index 69eb7a9c31c..2e5aa348023 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-124-ordered-radicals.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-124-ordered-radicals.md @@ -1,6 +1,6 @@ --- id: 5900f3e81000cf542c50fefb -title: 'Problem 124: Ordered radicals' +title: 'Завдання 124: впорядковані радикали' challengeType: 1 forumTopicId: 301751 dashedName: problem-124-ordered-radicals @@ -8,17 +8,17 @@ dashedName: problem-124-ordered-radicals # --description-- -The radical of $n$, $rad(n)$, is the product of the distinct prime factors of $n$. For example, $504 = 2^3 × 3^2 × 7$, so $rad(504) = 2 × 3 × 7 = 42$. +Радикалом числа $n$ — $rad(n)$ — називають добуток простих множників $n$. Наприклад, $504 = 2^3 × 3^2 × 7$, тому $rad(504) = 2 × 3 × 7 = 42$. -If we calculate $rad(n)$ for $1 ≤ n ≤ 10$, then sort them on $rad(n)$, and sorting on $n$ if the radical values are equal, we get: +Якщо обчислити $rad(n)$ за умови $1 ≤ n ≤ 10$ та впорядкувати їх за $rad(n)$ й $n$, якщо значення радикалів однакові, ми отримаємо:
- + - + @@ -112,7 +112,7 @@ If we calculate $rad(n)$ for $1 ≤ n ≤ 10$, then sort them on $rad(n)$, and s
$Unsorted$$Невпорядковано$ $Sorted$$Впорядковано$
$n$

-Let $E(k)$ be the $k$th element in the sorted $n$ column; for example, $E(4) = 8$ and $E(6) = 9$. If $rad(n)$ is sorted for $1 ≤ n ≤ 100000$, find $E(10000)$. +Нехай $E(k)$ є $k$-ним елементом у впорядкованому стовпці $n$, наприклад, $E(4) = 8$ та $E(6) = 9$. Знайдіть $E(10000)$, якщо $rad(n)$ впорядковано за умови $1 ≤ n ≤ 100000$. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-125-palindromic-sums.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-125-palindromic-sums.md index 81cb77c31d5..10799580796 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-125-palindromic-sums.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-125-palindromic-sums.md @@ -1,6 +1,6 @@ --- id: 5900f3e91000cf542c50fefc -title: 'Problem 125: Palindromic sums' +title: 'Завдання 125: паліндромні суми' challengeType: 1 forumTopicId: 301752 dashedName: problem-125-palindromic-sums @@ -8,11 +8,11 @@ dashedName: problem-125-palindromic-sums # --description-- -The palindromic number 595 is interesting because it can be written as the sum of consecutive squares: $6^2 + 7^2 + 8^2 + 9^2 + 10^2 + 11^2 + 12^2$. +Паліндромне число 595 цікаве тим, що його можна записати як суму послідовних квадратів: $6^2 + 7^2 + 8^2 + 9^2 + 10^2 + 11^2 + 12^2$. -There are exactly eleven palindromes below one-thousand that can be written as consecutive square sums, and the sum of these palindromes is 4164. Note that $1 = 0^2 + 1^2$ has not been included as this problem is concerned with the squares of positive integers. +Існує рівно одинадцять паліндромів менших за одну тисячу, які можна записати у вигляді суми послідовних квадратів, а сума цих паліндромів дорівнює 4164. Зауважте, що $1 = 0^2 + 1^2$ не враховано, оскільки це завдання стосується квадратів лише натуральних чисел. -Find the sum of all the numbers less than the `limit` that are both palindromic and can be written as the sum of consecutive squares. +Знайдіть суму всіх чисел менших за `limit`, які є паліндромами і можуть бути записані як сума послідовних квадратів. # --hints-- `palindromicSums(100000000)` має повернути `2906969179`. diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-126-cuboid-layers.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-126-cuboid-layers.md index b412823e951..d6896748bf9 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-126-cuboid-layers.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-126-cuboid-layers.md @@ -1,6 +1,6 @@ --- id: 5900f3ea1000cf542c50fefd -title: 'Problem 126: Cuboid layers' +title: 'Завдання 126: шари паралелепіпеда' challengeType: 1 forumTopicId: 301753 dashedName: problem-126-cuboid-layers @@ -8,19 +8,19 @@ dashedName: problem-126-cuboid-layers # --description-- -The minimum number of cubes to cover every visible face on a cuboid measuring 3 x 2 x 1 is twenty-two. +Мінімальна кількість кубів, необхідних для того, щоб охопити кожну видиму грань прямокутного паралелепіпеда розміром 3 x 2 x 1, становить двадцять два. -3x2x1 cuboid covered by twenty-two 1x1x1 cubes +Паралелепіпед 3x2x1, покритий двадцятьма двома кубами 1x1x1 -If we add a second layer to this solid it would require forty-six cubes to cover every visible face, the third layer would require seventy-eight cubes, and the fourth layer would require one-hundred and eighteen cubes to cover every visible face. +Якщо ми додамо другий шар до цього тіла, то для покриття кожної видимої грані знадобиться сорок шість кубів, для третього шару знадобиться сімдесят вісім кубів, а для четвертого шару знадобиться сто вісімнадцять кубів. -However, the first layer on a cuboid measuring 5 x 1 x 1 also requires twenty-two cubes; similarly, the first layer on cuboids measuring 5 x 3 x 1, 7 x 2 x 1, and 11 x 1 x 1 all contain forty-six cubes. +Однак перший шар на паралелепіпеді розміром 5 x 1 x 1 також вимагає двадцяти двох кубів, а перший шар на паралелепіпедах розмірами 5 x 3 x 1, 7 x 2 x 1 та 11 x 1 x 1 вимагає сорок шість кубів. -We shall define $C(n)$ to represent the number of cuboids that contain $n$ cubes in one of its layers. So $C(22) = 2$, $C(46) = 4$, $C(78) = 5$, and $C(118) = 8$. +Визначимо $C(n)$ як число паралелепіпедів, які містять $n$ кубів в одному зі своїх шарів. Отже, $C(22) = 2$, $C(46) = 4$, $C(78) = 5$ і $C(118) = 8$. -It turns out that 154 is the least value of $n$ for which $C(n) = 10$. +Виявляється, що 154 є найменшим значенням $n$, за якого $C(n) = 10$. -Find the least value of $n$ for which $C(n) = 1000$. +Знайдіть найменше значення $n$, за якого $C(n) = 1000$. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-127-abc-hits.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-127-abc-hits.md index 468e8f201a1..2fd6ed9fb4e 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-127-abc-hits.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-127-abc-hits.md @@ -1,6 +1,6 @@ --- id: 5900f3ec1000cf542c50fefe -title: 'Problem 127: abc-hits' +title: 'Завдання 127: abc-збіги' challengeType: 1 forumTopicId: 301754 dashedName: problem-127-abc-hits @@ -8,25 +8,25 @@ dashedName: problem-127-abc-hits # --description-- -The radical of $n$, $rad(n)$, is the product of distinct prime factors of $n$. For example, $504 = 2^3 × 3^2 × 7$, so $rad(504) = 2 × 3 × 7 = 42$. +Радикалом числа $n$ — $rad(n)$ — називають добуток простих множників $n$. Наприклад, $504 = 2^3 × 3^2 × 7$, тому $rad(504) = 2 × 3 × 7 = 42$. -We shall define the triplet of positive integers (a, b, c) to be an abc-hit if: +Три натуральні числа (a, b, c) будуть abc-збігом, якщо: -1. $GCD(a, b) = GCD(a, c) = GCD(b, c) = 1$ +1. $НСД(a, b) = НСД(a, c) = НСД(b, c) = 1$ 2. $a < b$ 3. $a + b = c$ 4. $rad(abc) < c$ -For example, (5, 27, 32) is an abc-hit, because: +Наприклад, (5, 27, 32) є abc-збігом, оскільки: -1. $GCD(5, 27) = GCD(5, 32) = GCD(27, 32) = 1$ +1. $НСД(5, 27) = НСД(5, 32) = НСД(27, 32) = 1$ 2. $5 < 27$ 3. $5 + 27 = 32$ 4. $rad(4320) = 30 < 32$ -It turns out that abc-hits are quite rare and there are only thirty-one abc-hits for $c < 1000$, with $\sum{c} = 12523$. +Виявляється, abc-збіги досить рідкісні та існує лише 31 abc-збіг за умови $c < 1000$, де $\sum{c} = 12523$. -Find $\sum{c}$ for $c < 120000$. +Знайдіть $\sum{c}$ за умови $c < 120000$. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md index 0dbd8c86c69..9fdc8f45941 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-128-hexagonal-tile-differences.md @@ -1,6 +1,6 @@ --- id: 5900f3ec1000cf542c50feff -title: 'Problem 128: Hexagonal tile differences' +title: 'Завдання 128: різниці шестикутних плиток' challengeType: 1 forumTopicId: 301755 dashedName: problem-128-hexagonal-tile-differences @@ -8,23 +8,23 @@ dashedName: problem-128-hexagonal-tile-differences # --description-- -A hexagonal tile with number 1 is surrounded by a ring of six hexagonal tiles, starting at "12 o'clock" and numbering the tiles 2 to 7 in an anti-clockwise direction. +Шестикутна плитка з числом 1 оточена кільцем із шести шестикутних плиток, які, починаючи із «12-ї години», пронумеровані від 2 до 7 у напрямку проти годинникової стрілки. -New rings are added in the same fashion, with the next rings being numbered 8 to 19, 20 to 37, 38 to 61, and so on. The diagram below shows the first three rings. +Нові кільця додані так само, і пронумеровані від 8 до 19, від 20 до 37, від 38 до 61 і так далі. На малюнку нижче зображено перші три кільця. -three first rings of arranged hexagonal tiles with numbers 1 to 37, and with highlighted tiles 8 and 17 +перші три кільця упорядкованих шестикутних плиток з числами від 1 до 37 і з виділеними плитками 8 та 17 -By finding the difference between tile $n$ and each of its six neighbours we shall define $PD(n)$ to be the number of those differences which are prime. +Знайшовши різницю між плиткою $n$ та кожним із її шести сусідів, визначимо $PD(n)$ як кількість різниць, які є простими числами. -For example, working clockwise around tile 8 the differences are 12, 29, 11, 6, 1, and 13. So $PD(8) = 3$. +Наприклад, працюючи за годинниковою стрілкою навколо клітинки 8, різницями є 12, 29, 11, 6, 1 та 13. Отже, $PD(8) = 3$. -In the same way, the differences around tile 17 are 1, 17, 16, 1, 11, and 10, hence $PD(17) = 2$. +Точно так само різницями навколо плитки 17 є 1, 17, 16, 1, 11 та 10, тому $PD(17) = 2$. -It can be shown that the maximum value of $PD(n)$ is $3$. +Можна показати, що максимальним значенням $PD(n)$ є $3$. -If all of the tiles for which $PD(n) = 3$ are listed in ascending order to form a sequence, the 10th tile would be 271. +Якщо всі плитки, для яких $PD(n) = 3$, перераховані в порядку зростання для формування послідовності, то десятою плиткою буде 271. -Find the 2000th tile in this sequence. +Знайдіть 2000-ну плитку в цій послідовності. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-129-repunit-divisibility.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-129-repunit-divisibility.md index 237352a4c67..b9dc666e1b3 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-129-repunit-divisibility.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-129-repunit-divisibility.md @@ -1,6 +1,6 @@ --- id: 5900f3ef1000cf542c50ff01 -title: 'Problem 129: Repunit divisibility' +title: 'Завдання 129: подільність реп’юніта' challengeType: 1 forumTopicId: 301756 dashedName: problem-129-repunit-divisibility @@ -8,13 +8,13 @@ dashedName: problem-129-repunit-divisibility # --description-- -A number consisting entirely of ones is called a repunit. We shall define $R(k)$ to be a repunit of length $k$; for example, $R(6) = 111111$. +Число, що повністю складається з одиниць, називається реп’юнітом. Визначимо, що $R(k)$ є реп’юнітом довжиною $k$. Наприклад, $R(6) = 111111$. -Given that $n$ is a positive integer and $GCD(n, 10) = 1$, it can be shown that there always exists a value, $k$, for which $R(k)$ is divisible by $n$, and let $A(n)$ be the least such value of $k$; for example, $A(7) = 6$ and $A(41) = 5$. +Дано, що $n$ є цілим додатним числом і $НСД(n, 10) = 1$. Можна побачити, що завжди існує значення $k$, за якого $R(k)$ ділиться на $n$ без остачі. Нехай $A(n)$ буде найменшим таким значенням $k$; наприклад, $A(7) = 6$ і $A(41) = 5$. -The least value of $n$ for which $A(n)$ first exceeds ten is 17. +Найменше значення $n$, за якого $A(n)$ перевищує десять, дорівнює 17. -Find the least value of $n$ for which $A(n)$ first exceeds one-million. +Знайдіть найменше значення $n$, за якого $A(n)$ перевищує мільйон. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-130-composites-with-prime-repunit-property.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-130-composites-with-prime-repunit-property.md index fd8df202500..c6f113c42dc 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-130-composites-with-prime-repunit-property.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-130-composites-with-prime-repunit-property.md @@ -1,6 +1,6 @@ --- id: 5900f3ee1000cf542c50ff00 -title: 'Problem 130: Composites with prime repunit property' +title: 'Завдання 130: складені числа з властивістю простих реп’юнітів' challengeType: 1 forumTopicId: 301758 dashedName: problem-130-composites-with-prime-repunit-property @@ -8,15 +8,15 @@ dashedName: problem-130-composites-with-prime-repunit-property # --description-- -A number consisting entirely of ones is called a repunit. We shall define $R(k)$ to be a repunit of length $k$; for example, $R(6) = 111111$. +Число, що повністю складається з одиниць, називається реп’юнітом. Визначимо, що $R(k)$ є реп’юнітом довжиною $k$. Наприклад, $R(6) = 111111$. -Given that $n$ is a positive integer and $GCD(n, 10) = 1$, it can be shown that there always exists a value, $k$, for which $R(k)$ is divisible by $n$, and let $A(n)$ be the least such value of $k$; for example, $A(7) = 6$ and $A(41) = 5$. +Дано, що $n$ є цілим додатним числом і $НСД(n, 10) = 1$. Можна побачити, що завжди існує значення $k$, за якого $R(k)$ ділиться на $n$ без остачі. Нехай $A(n)$ буде найменшим таким значенням $k$; наприклад, $A(7) = 6$ і $A(41) = 5$. -You are given that for all primes, $p > 5$, that $p − 1$ is divisible by $A(p)$. For example, when $p = 41, A(41) = 5$, and 40 is divisible by 5. +Дано, що для всіх простих чисел $p > 5$, число $p − 1$ ділиться на $A(p)$ без остачі. Наприклад, коли $p = 41, A(41) = 5$, а 40 ділиться на 5 без остачі. -However, there are rare composite values for which this is also true; the first five examples being 91, 259, 451, 481, and 703. +Однак існують рідкісні складені значення, для яких діє ця умова. Перші п’ять прикладів: 91, 259, 451, 481 та 703. -Find the sum of the first twenty-five composite values of $n$ for which $GCD(n, 10) = 1$ and $n − 1$ is divisible by $A(n)$. +Знайдіть суму перших двадцяти п’яти складених значень $n$, за яких $НСД (n, 10) = 1$ й $n − 1$ ділиться на $A(n)$ без остачі. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-131-prime-cube-partnership.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-131-prime-cube-partnership.md index 2606fced987..b4089fff8b6 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-131-prime-cube-partnership.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-131-prime-cube-partnership.md @@ -1,6 +1,6 @@ --- id: 5900f3ef1000cf542c50ff02 -title: 'Problem 131: Prime cube partnership' +title: 'Завдання 131: кубічне партнерство простих чисел' challengeType: 1 forumTopicId: 301759 dashedName: problem-131-prime-cube-partnership @@ -8,13 +8,13 @@ dashedName: problem-131-prime-cube-partnership # --description-- -There are some prime values, $p$, for which there exists a positive integer, $n$, such that the expression $n^3 + n^{2}p$ is a perfect cube. +Для деяких простих значень $p$ існують натуральні числа $n$, за яких вираз $n^3 + n^{2}p$ є ідеальним кубом. -For example, when $p = 19,\\ 8^3 + 8^2 × 19 = {12}^3$. +Наприклад, якщо $p = 19,\\ 8^3 + 8^2 × 19 = {12}^3$. -What is perhaps most surprising is that the value of $n$ is unique for each prime with this property, and there are only four such primes below one hundred. +Мабуть, найдивовижніше те, що значення $n$ є унікальним для кожного простого числа з цією властивістю, і таких простих чисел, що менші за сто, всього чотири. -How many primes below one million have this remarkable property? +Скільки простих чисел, що менші за один мільйон, мають цю дивовижну властивість? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-132-large-repunit-factors.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-132-large-repunit-factors.md index d6cecc16a4e..686a97cd552 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-132-large-repunit-factors.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-132-large-repunit-factors.md @@ -1,6 +1,6 @@ --- id: 5900f3f11000cf542c50ff03 -title: 'Problem 132: Large repunit factors' +title: 'Завдання 132: множники великих реп’юнітів' challengeType: 1 forumTopicId: 301760 dashedName: problem-132-large-repunit-factors @@ -8,11 +8,11 @@ dashedName: problem-132-large-repunit-factors # --description-- -A number consisting entirely of ones is called a repunit. We shall define $R(k)$ to be a repunit of length $k$. +Число, що повністю складається з одиниць, називається реп’юнітом. Визначимо $R(k)$ як реп’юніт довжиною $k$. -For example, $R(10) = 1111111111 = 11 × 41 × 271 × 9091$, and the sum of these prime factors is 9414. +Наприклад, $R(10) = 1111111111 = 11 × 41 × 271 × 9091$, а сумою цих простих множників є 9414. -Find the sum of the first forty prime factors of $R({10}^9)$. +Знайдіть суму перших сорока простих множників $R({10}^9)$. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-133-repunit-nonfactors.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-133-repunit-nonfactors.md index aeba348a27a..86224dd7e39 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-133-repunit-nonfactors.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-133-repunit-nonfactors.md @@ -1,6 +1,6 @@ --- id: 5900f3f21000cf542c50ff04 -title: 'Problem 133: Repunit nonfactors' +title: 'Завдання 133: немножники реп’юнітів' challengeType: 1 forumTopicId: 301761 dashedName: problem-133-repunit-nonfactors @@ -8,13 +8,13 @@ dashedName: problem-133-repunit-nonfactors # --description-- -A number consisting entirely of ones is called a repunit. We shall define $R(k)$ to be a repunit of length $k$; for example, $R(6) = 111111$. +Число, що повністю складається з одиниць, називається реп’юнітом. Визначимо, що $R(k)$ є реп’юнітом довжиною $k$. Наприклад, $R(6) = 111111$. -Let us consider repunits of the form $R({10}^n)$. +Розглянемо реп’юніт $R({10}^n)$. -Although $R(10)$, $R(100)$, or $R(1000)$ are not divisible by 17, $R(10000)$ is divisible by 17. Yet there is no value of n for which $R({10}^n)$ will divide by 19. Remarkably, 11, 17, 41, and 73 are the only four primes below one-hundred that can be a factor of $R({10}^n)$. +Хоча $R(10)$, $R(100)$ чи $R(1000)$ не діляться на 17 без остачі, $R(10000)$ ділиться на 17 без остачі. Однак не існує значення n, за якого $R({10}^n)$ ділиться на 19 без остачі. Пам’ятайте, що 11, 17, 41 та 73 — це єдині чотири прості числа менші за сто, які можуть бути множниками $R({10}^n)$. -Find the sum of all the primes below one-hundred thousand that will never be a factor of $R({10}^n)$. +Знайдіть суму всіх простих чисел менших за сто тисяч, які не можуть бути множниками $R({10}^n)$. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-134-prime-pair-connection.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-134-prime-pair-connection.md index c01f7dd004f..d127ecc7525 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-134-prime-pair-connection.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-134-prime-pair-connection.md @@ -1,6 +1,6 @@ --- id: 5900f3f21000cf542c50ff05 -title: 'Problem 134: Prime pair connection' +title: 'Завдання 134: з’єднання пар простих чисел' challengeType: 1 forumTopicId: 301762 dashedName: problem-134-prime-pair-connection @@ -8,11 +8,11 @@ dashedName: problem-134-prime-pair-connection # --description-- -Consider the consecutive primes $p_1 = 19$ and $p_2 = 23$. It can be verified that 1219 is the smallest number such that the last digits are formed by $p_1$ whilst also being divisible by $p_2$. +Розглянемо прості числа $p_1 = 19$ та $p_2 = 23$. Можна перевірити, що 1219 є найменшим числом, двома останніми цифрами якого є $p_1$, а також ділиться на $p_2$. -In fact, with the exception of $p_1 = 3$ and $p_2 = 5$, for every pair of consecutive primes, $p_2 > p_1$, there exist values of $n$ for which the last digits are formed by $p_1$ and $n$ is divisible by $p_2$. Let $S$ be the smallest of these values of $n$. +За винятком пари $p_1 = 3$ та $p_2 = 5$, для кожної пари послідовних простих чисел $p_2 > p_1$ існують значення $n$, останніми двома цифрами яких є $p_1$, а $n$ ділиться на $p_2$. Нехай $S$ є найменшим із таких значень $n$. -Find $\sum{S}$ for every pair of consecutive primes with $5 ≤ p_1 ≤ 1000000$. +Знайдіть $\sum{S}$ для кожної пари послідовних простих чисел за умови $5 ≤ p_1 ≤ 1000000$. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-135-same-differences.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-135-same-differences.md index 18c233af8cd..6e4167be726 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-135-same-differences.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-135-same-differences.md @@ -1,6 +1,6 @@ --- id: 5900f3f31000cf542c50ff06 -title: 'Problem 135: Same differences' +title: 'Завдання 135: однакова різниця' challengeType: 1 forumTopicId: 301763 dashedName: problem-135-same-differences @@ -8,13 +8,13 @@ dashedName: problem-135-same-differences # --description-- -Given the positive integers, $x$, $y$, and $z$, are consecutive terms of an arithmetic progression, the least value of the positive integer, $n$, for which the equation, $x^2 − y^2 − z^2 = n$, has exactly two solutions is $n = 27$: +Відомо, що натуральні числа $x$, $y$ та $z$ є послідовними членами арифметичної прогресії. Найменшим натуральним числом $n$, за якого рівняння $x^2 − y^2 − z^2 = n$ має два розв’язки, є $n = 27$: $$34^2 − 27^2 − 20^2 = 12^2 − 9^2 − 6^2 = 27$$ -It turns out that $n = 1155$ is the least value which has exactly ten solutions. +Виявляється, що $n = 1155$ є найменшим значенням, яке має десять розв’язків. -How many values of $n$ less than one million have exactly ten distinct solutions? +Скільки значень $n$ менших одного мільйона мають десять різних розв’язків? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-136-singleton-difference.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-136-singleton-difference.md index f532975cebe..f6ab266b084 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-136-singleton-difference.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-136-singleton-difference.md @@ -1,6 +1,6 @@ --- id: 5900f3f51000cf542c50ff07 -title: 'Problem 136: Singleton difference' +title: 'Завдання 136: унікальна різниця' challengeType: 1 forumTopicId: 301764 dashedName: problem-136-singleton-difference @@ -8,13 +8,13 @@ dashedName: problem-136-singleton-difference # --description-- -The positive integers, $x$, $y$, and $z$, are consecutive terms of an arithmetic progression. Given that $n$ is a positive integer, the equation, $x^2 − y^2 − z^2 = n$, has exactly one solution when $n = 20$: +Натуральні числа $x$, $y$ та $z$ є послідовними членами арифметичної прогресії. Рівняння $x^2 − y^2 − z^2 = n$ має лише один розв’язок, якщо $n = 20$: $$13^2 − 10^2 − 7^2 = 20$$ -In fact, there are twenty-five values of $n$ below one hundred for which the equation has a unique solution. +Існує двадцять п’ять значень $n$ менших ста, за яких рівняння має один розв’язок. -How many values of $n$ less than fifty million have exactly one solution? +Скільки значень $n$ менших п’ятдесяти мільйонів мають один розв’язок? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-137-fibonacci-golden-nuggets.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-137-fibonacci-golden-nuggets.md index 3ad96bdb148..95df2227021 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-137-fibonacci-golden-nuggets.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-137-fibonacci-golden-nuggets.md @@ -1,6 +1,6 @@ --- id: 5900f3f51000cf542c50ff08 -title: 'Problem 137: Fibonacci golden nuggets' +title: 'Завдання 137: золоті самородки Фібоначчі' challengeType: 1 forumTopicId: 301765 dashedName: problem-137-fibonacci-golden-nuggets @@ -8,16 +8,16 @@ dashedName: problem-137-fibonacci-golden-nuggets # --description-- -Consider the infinite polynomial series $A_{F}(x) = xF_1 + x^2F_2 + x^3F_3 + \ldots$, where $F_k$ is the $k$th term in the Fibonacci sequence: $1, 1, 2, 3, 5, 8, \ldots$; that is, $F_k = F_{k − 1} + F_{k − 2}, F_1 = 1$ and $F_2 = 1$. +Розглянемо нескінченний поліноміальний ряд $A_{F}(x) = xF_1 + x^2F_2 + x^3F_3 + \ldots$, де $F_k$ є $k$-им членом у послідовності Фібоначчі: $1, 1, 2, 3, 5, 8, \ldots$. Таким чином $F_k = F_{k − 1} + F_{k − 2}, F_1 = 1$ та $F_2 = 1$. -For this problem we shall be interested in values of $x$ for which $A_{F}(x)$ is a positive integer. +Нас цікавлять значення $x$, за яких $A_{F}(x)$ є натуральним числом. -Surprisingly +На диво, $$\begin{align} A_F(\frac{1}{2}) & = (\frac{1}{2}) × 1 + {(\frac{1}{2})}^2 × 1 + {(\frac{1}{2})}^3 × 2 + {(\frac{1}{2})}^4 × 3 + {(\frac{1}{2})}^5 × 5 + \cdots \\\\ & = \frac{1}{2} + \frac{1}{4} + \frac{2}{8} + \frac{3}{16} + \frac{5}{32} + \cdots \\\\ & = 2 \end{align}$$ -The corresponding values of $x$ for the first five natural numbers are shown below. +Відповідні значення $x$ для перших п’яти натуральних чисел наведено нижче. | $x$ | $A_F(x)$ | | --------------------------- | -------- | @@ -27,9 +27,9 @@ The corresponding values of $x$ for the first five natural numbers are shown bel | $\frac{\sqrt{89} − 5}{8}$ | $4$ | | $\frac{\sqrt{34} − 3}{5}$ | $5$ | -We shall call $A_F(x)$ a golden nugget if $x$ is rational, because they become increasingly rarer; for example, the 10th golden nugget is 74049690. +Назвемо $A_F(x)$ золотим самородком, якщо $x$ є раціональним, оскільки вони трапляються дедалі рідше. Наприклад, десятим золотим самородком є 74049690. -Find the 15th golden nugget. +Знайдіть п’ятнадцятий золотий самородок. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-138-special-isosceles-triangles.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-138-special-isosceles-triangles.md index f6f7dac4cb7..9ff85b6fe3b 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-138-special-isosceles-triangles.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-138-special-isosceles-triangles.md @@ -1,6 +1,6 @@ --- id: 5900f3f61000cf542c50ff09 -title: 'Problem 138: Special isosceles triangles' +title: 'Завдання 138: особливі рівнобедрені трикутники' challengeType: 1 forumTopicId: 301766 dashedName: problem-138-special-isosceles-triangles @@ -8,15 +8,15 @@ dashedName: problem-138-special-isosceles-triangles # --description-- -Consider the isosceles triangle with base length, $b = 16$, and legs, $L = 17$. +Розглянемо рівнобедрений трикутник з довжиною основи $b = 16$ та катетами $L = 17$. -isosceles triangle with edges named as L - two edges with the same length and base of the triangle as b; and height of the triangle - h from the base of the triangle to the angle between L edges +рівнобедрений трикутник з ребрами: два ребра з однаковою довжиною L і основою трикутника b, та висотою трикутника h від основи трикутника до кута між ребрами L -By using the Pythagorean theorem, it can be seen that the height of the triangle, $h = \sqrt{{17}^2 − 8^2} = 15$, which is one less than the base length. +За теоремою Піфагора бачимо, що висота трикутника $h = \sqrt{{17}^2 − 8^2} = 15$, що менше на один від довжини основи. -With $b = 272$ and $L = 305$, we get $h = 273$, which is one more than the base length, and this is the second smallest isosceles triangle with the property that $h = b ± 1$. +За умови $b = 272$ та $L = 305$ ми отримаємо $h = 273$, що більше на один від довжини основи та є другим найменшим трикутником з властивістю $h = b ± 1$. -Find $\sum{L}$ for the twelve smallest isosceles triangles for which $h = b ± 1$ and $b$, $L$ are positive integers. +Знайдіть $\sum{L}$ дванадцяти найменших рівнобедрених трикутників, для яких $h = b ± 1$, де $b$ та $L$ є натуральними числами. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-139-pythagorean-tiles.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-139-pythagorean-tiles.md index edd06ade2cb..da062cf546d 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-139-pythagorean-tiles.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-139-pythagorean-tiles.md @@ -1,6 +1,6 @@ --- id: 5900f3f71000cf542c50ff0a -title: 'Problem 139: Pythagorean tiles' +title: 'Завдання 139: мозаїка Піфагора' challengeType: 1 forumTopicId: 301767 dashedName: problem-139-pythagorean-tiles @@ -8,15 +8,15 @@ dashedName: problem-139-pythagorean-tiles # --description-- -Let (a, b, c) represent the three sides of a right angle triangle with integral length sides. It is possible to place four such triangles together to form a square with length c. +Нехай числами (a, b, c) представлені три сторони прямокутного трикутника з цілими сторонами. Можливо об’єднати чотири такі трикутники, щоб отримати квадрат з довжиною сторони c. -For example, (3, 4, 5) triangles can be placed together to form a 5 by 5 square with a 1 by 1 hole in the middle and it can be seen that the 5 by 5 square can be tiled with twenty-five 1 by 1 squares. +Наприклад, трикутники (3, 4, 5) можна об’єднати, утворивши квадрат 5х5 і прорізом 1х1 всередині. Як бачимо, квадрат можна покрити двадцятьма п’ятьма квадратними плитками 1х1. -two 5 x 5 squares: one with four 3x4x5 triangles placed to create 1x1 hole in the middle; second with twenty-five 1x1 squares +два квадрати 5x5: один складається з чотирьох трикутників 3x4x5, розташованих так, що посередині утворюється проріз 1x1; другий — з двадцяти п’яти квадратів 1x1 -However, if (5, 12, 13) triangles were used, the hole would measure 7 by 7. These 7 by 7 squares could not be used to tile the 13 by 13 square. +Однак, якщо використати трикутники (5, 12, 13), проріз становитиме 7х7. Квадрат 13х13 неможливо заповнити квадратами 7х7. -Given that the perimeter of the right triangle is less than one-hundred million, how many Pythagorean triangles would allow such a tiling to occur? +Відомо, що периметр трикутника праворуч менший за сто мільйонів. Для скількох Піфагорових трикутників можливе таке покриття плиткою? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-140-modified-fibonacci-golden-nuggets.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-140-modified-fibonacci-golden-nuggets.md index 13a9550a7d5..b7b0f72a308 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-140-modified-fibonacci-golden-nuggets.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-140-modified-fibonacci-golden-nuggets.md @@ -1,6 +1,6 @@ --- id: 5900f3fa1000cf542c50ff0c -title: 'Problem 140: Modified Fibonacci golden nuggets' +title: 'Завдання 140: модифіковані золоті самородки Фібоначчі' challengeType: 1 forumTopicId: 301769 dashedName: problem-140-modified-fibonacci-golden-nuggets @@ -8,11 +8,11 @@ dashedName: problem-140-modified-fibonacci-golden-nuggets # --description-- -Consider the infinite polynomial series $A_G(x) = xG_1 + x^2G_2 + x^3G_3 + \cdots$, where $G_k$ is the $k$th term of the second order recurrence relation $G_k = G_{k − 1} + G_{k − 2}, G_1 = 1$ and $G_2 = 4$; that is, $1, 4, 5, 9, 14, 23, \ldots$. +Розглянемо нескінченний поліноміальний ряд $A_G(x) = xG_1 + x^2G_2 + x^3G_3 + \cdots$, де $G_k$ є $k$-ним членом рекурентного співвідношення другого порядку $G_k = G_{k − 1} + G_{k − 2}, G_1 = 1$ та $G_2 = 4$. Тобто $1, 4, 5, 9, 14, 23, \ldots$. -For this problem we shall be concerned with values of $x$ for which $A_G(x)$ is a positive integer. +Нас цікавлять значення $x$, за яких $A_G(x)$ є натуральним числом. -The corresponding values of $x$ for the first five natural numbers are shown below. +Відповідні значення $x$ для перших п’яти натуральних чисел наведено нижче. | $x$ | $A_G(x)$ | | ----------------------------- | -------- | @@ -22,7 +22,7 @@ The corresponding values of $x$ for the first five natural numbers are shown bel | $\frac{\sqrt{137} − 5}{14}$ | $4$ | | $\frac{1}{2}$ | $5$ | -We shall call $A_G(x)$ a golden nugget if $x$ is rational because they become increasingly rarer; for example, the 20th golden nugget is 211345365. Find the sum of the first thirty golden nuggets. +Назвемо $A_G(x)$ золотим самородком, якщо $x$ є раціональним, оскільки вони трапляються дедалі рідше. Наприклад, двадцятим золотим самородком є 211345365. Знайдіть суму перших тридцяти золотих самородків. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-141-investigating-progressive-numbers-n-which-are-also-square.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-141-investigating-progressive-numbers-n-which-are-also-square.md index ffb76b9d42e..fa554109aa0 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-141-investigating-progressive-numbers-n-which-are-also-square.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-141-investigating-progressive-numbers-n-which-are-also-square.md @@ -1,6 +1,6 @@ --- id: 5900f3f91000cf542c50ff0b -title: 'Problem 141: Investigating progressive numbers, n, which are also square' +title: 'Завдання 141: вивчення прогресивних чисел n, які є квадратами' challengeType: 1 forumTopicId: 301770 dashedName: problem-141-investigating-progressive-numbers-n-which-are-also-square @@ -8,15 +8,15 @@ dashedName: problem-141-investigating-progressive-numbers-n-which-are-also-squar # --description-- -A positive integer, $n$, is divided by $d$ and the quotient and remainder are $q$ and $r$ respectively. In addition $d$, $q$, and $r$ are consecutive positive integer terms in a geometric sequence, but not necessarily in that order. +При діленні натурального числа $n$ на $d$ отримуємо частку $q$ та остачу $r$. До того ж значення $d$, $q$ та $r$ є послідовними членами геометричної прогресії, але необов’язково в такому порядку. -For example, 58 divided by 6 has a quotient of 9 and a remainder of 4. It can also be seen that 4, 6, 9 are consecutive terms in a geometric sequence (common ratio $\frac{3}{2}$). +Наприклад, якщо поділити 58 на 6, отримаємо частку 9 і остачу 4. Можна побачити, що 4, 6, 9 є послідовними членами геометричної прогресії (знаменником прогресії є $\frac{3}{2}$). -We will call such numbers, $n$, progressive. +Такі числа $n$ називають прогресивними. -Some progressive numbers, such as 9 and 10404 = ${102}^2$, also happen to be perfect squares. The sum of all progressive perfect squares below one hundred thousand is 124657. +Деякі прогресивні числа, як-от 9 та 10404 = ${102}^2$, також є повними квадратами. Сума всіх прогресивних повних квадратів менших за сто тисяч дорівнює 124657. -Find the sum of all progressive perfect squares below one trillion (${10}^{12}$). +Знайдіть суму всіх прогресивних повних квадратів менших за один трильйон (${10}^{12}$). # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-142-perfect-square-collection.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-142-perfect-square-collection.md index 1632c3daa09..2228a2ceb63 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-142-perfect-square-collection.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-142-perfect-square-collection.md @@ -1,6 +1,6 @@ --- id: 5900f3fa1000cf542c50ff0d -title: 'Problem 142: Perfect Square Collection' +title: 'Завдання 142: колекція повних квадратів' challengeType: 1 forumTopicId: 301771 dashedName: problem-142-perfect-square-collection @@ -8,7 +8,7 @@ dashedName: problem-142-perfect-square-collection # --description-- -Find the smallest $x + y + z$ with integers $x > y > z > 0$ such that $x + y$, $x − y$, $x + z$, $x − z$, $y + z$, $y − z$ are all perfect squares. +Знайдіть найменше значення $x + y + z$ з такими цілими числами $x > y > z > 0$, щоб $x + y$, $x − y$, $x + z$, $x − z$, $y + z$, $y − z$ були повними квадратами. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-143-investigating-the-torricelli-point-of-a-triangle.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-143-investigating-the-torricelli-point-of-a-triangle.md index e5f3d1a12f1..764e4b83faa 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-143-investigating-the-torricelli-point-of-a-triangle.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-143-investigating-the-torricelli-point-of-a-triangle.md @@ -1,6 +1,6 @@ --- id: 5900f3fc1000cf542c50ff0e -title: 'Problem 143: Investigating the Torricelli point of a triangle' +title: 'Завдання 143: вивчення точки Торрічеллі у трикутниках' challengeType: 1 forumTopicId: 301772 dashedName: problem-143-investigating-the-torricelli-point-of-a-triangle @@ -8,15 +8,15 @@ dashedName: problem-143-investigating-the-torricelli-point-of-a-triangle # --description-- -Let ABC be a triangle with all interior angles being less than 120 degrees. Let X be any point inside the triangle and let $XA = p$, $XC = q$, and $XB = r$. +Нехай ABC буде трикутником з внутрішніми кутами меншими, ніж 120 градусів. Нехай Х буде будь-якою точкою всередині трикутника, а $XA = p$, $XC = q$, і $XB = r$. -Fermat challenged Torricelli to find the position of X such that p + q + r was minimised. +Ферма кинув виклик Торрічеллі, аби той знайшов таке розміщення Х, щоб p + q + r зводилось до мінімуму. -Torricelli was able to prove that if equilateral triangles AOB, BNC and AMC are constructed on each side of triangle ABC, the circumscribed circles of AOB, BNC, and AMC will intersect at a single point, T, inside the triangle. Moreover he proved that T, called the Torricelli/Fermat point, minimises $p + q + r$. Even more remarkable, it can be shown that when the sum is minimised, $AN = BM = CO = p + q + r$ and that AN, BM and CO also intersect at T. +Торрічеллі зміг довести, що якщо рівносторонні трикутники AOB, BNC та AMC будуються з кожної сторони трикутника ABC, то описані навколо AOB, BNC та AMC кола будуть перетинатися в одній точці T, всередині трикутника. Крім того, він довів, що точка Т, названа точкою Торрічеллі / Ферма, мінімізує $p + q + r$. Також можна помітити, що при мінімізації суми, $AN = BM = CO = p + q + r $ і AN, BM і CO також перетинаються в точці T. -equilateral triangles AOB, BNC and AMC constructed on each side of triangle ABC; with the circumscribed circles of AOB, BNC, and AMC will intersecting at a single point, T, inside the triangle +рівносторонні трикутники AOB, BNC та AMC будуються з кожної сторони трикутника ABC; з описаними навколо AOB, BNC та AMC колами, які будуть перетинатися в одній точці T, всередині трикутника -If the sum is minimised and a, b, c, p, q and r are all positive integers we shall call triangle ABC a Torricelli triangle. For example, $a = 399$, $b = 455$, $c = 511$ is an example of a Torricelli triangle, with $p + q + r = 784$. Find the sum of all distinct values of $p + q + r ≤ 120000$ for Torricelli triangles. +Якщо сума зведена до мінімуму і a, b, c, p, q та r є натуральними числами, ми називатимемо трикутник ABC трикутником Торрічеллі. Наприклад, $a = 399$, $b = 455$, $c = 511$ є прикладом трикутника Торрічеллі, у якого $p + q + r = 784$. Знайдіть суму всіх різних значень $p + q + r + r ≤ 120000$ для трикутників Торрічеллі. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-144-investigating-multiple-reflections-of-a-laser-beam.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-144-investigating-multiple-reflections-of-a-laser-beam.md index 8e0ed2a6f16..20c46bead4f 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-144-investigating-multiple-reflections-of-a-laser-beam.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-144-investigating-multiple-reflections-of-a-laser-beam.md @@ -1,6 +1,6 @@ --- id: 5900f3fc1000cf542c50ff0f -title: 'Problem 144: Investigating multiple reflections of a laser beam' +title: 'Завдання 144: вивчення декількох відбиттів лазерного променя' challengeType: 1 forumTopicId: 301773 dashedName: problem-144-investigating-multiple-reflections-of-a-laser-beam @@ -8,30 +8,30 @@ dashedName: problem-144-investigating-multiple-reflections-of-a-laser-beam # --description-- -In laser physics, a "white cell" is a mirror system that acts as a delay line for the laser beam. The beam enters the cell, bounces around on the mirrors, and eventually works its way back out. +«Біла камера» у лазерній фізиці — це система дзеркал, яка діє як лінія затримки для лазерного променя. Промінь проникає у камеру, відскакує від дзеркал і находить вихід з неї. -The specific white cell we will be considering is an ellipse with the equation $4{x}^2 + y^2 = 100$ +Ми розглянемо конкретну білу камеру у вигляді еліпса, заданого рівнянням $4{x}^2 + y^2 = 100$ -The section corresponding to $−0.01 ≤ x ≤ +0.01$ at the top is missing, allowing the light to enter and exit through the hole. +Світло може проникнути та вийти завдяки тому, що видалено верхню ділянку $−0.01 ≤ x ≤ +0.01$.
- light beam starting at point (0.0, 10.1), and impacting the mirror at point (1.4, -9.6) - animation with first 10 reflections of the beam + світловий промінь починається в точці (0,0; 10,1) і падає на дзеркало в точці (1,4; -9,6) + анімація з першими 10 віддзеркаленнями променя

-The light beam in this problem starts at the point (0.0, 10.1) just outside the white cell, and the beam first impacts the mirror at (1.4, -9.6). +Світловий промінь у цій задачі починається за межами білої камери в точці (0,0; 10,1), а вперше стикається з дзеркалом в точці (1,4; -9,6). -Each time the laser beam hits the surface of the ellipse, it follows the usual law of reflection "angle of incidence equals angle of reflection." That is, both the incident and reflected beams make the same angle with the normal line at the point of incidence. +Кожного разу, коли лазерний промінь потрапляє на поверхню еліпса, він дотримується звичного закону відбиття «кут падіння дорівнює куту відбиття». Тобто надхідний і відбитий промені утворюють однаковий кут із нормаллю у точці падіння. -In the figure on the left, the red line shows the first two points of contact between the laser beam and the wall of the white cell; the blue line shows the line tangent to the ellipse at the point of incidence of the first bounce. +На малюнку зліва червона лінія показує перші дві точки дотику між лазерним променем та стіною білої камери, а синя лінія показує лінію, дотичну до еліпса в точці падіння першого відбиття. -The slope m of the tangent line at any point (x, y) of the given ellipse is: $m = −4 × \frac{x}{y}$ +Нахил m цієї дотичної лінії в будь-якій точці (x, y) заданого еліпса: $m = −4 × \frac{x}{y}$ -The normal line is perpendicular to this tangent line at the point of incidence. +Нормаль, проведена до точки падіння променя, перпендикулярна дотичній. -The animation on the right shows the first 10 reflections of the beam. +Анімація праворуч показує перші 10 віддзеркалень променя. -How many times does the beam hit the internal surface of the white cell before exiting? +Скільки разів промінь потрапляє на внутрішню поверхню білої камери перед виходом? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-145-how-many-reversible-numbers-are-there-below-one-billion.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-145-how-many-reversible-numbers-are-there-below-one-billion.md index 14f9a273857..8f4edaf49ff 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-145-how-many-reversible-numbers-are-there-below-one-billion.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-145-how-many-reversible-numbers-are-there-below-one-billion.md @@ -1,6 +1,6 @@ --- id: 5900f3fd1000cf542c50ff10 -title: 'Problem 145: How many reversible numbers are there below one-billion?' +title: 'Завдання 145: скільки існує оборотних чисел в межах одного мільярду?' challengeType: 1 forumTopicId: 301774 dashedName: problem-145-how-many-reversible-numbers-are-there-below-one-billion @@ -8,11 +8,11 @@ dashedName: problem-145-how-many-reversible-numbers-are-there-below-one-billion # --description-- -Some positive integers $n$ have the property that the sum [ $n + reverse(n)$ ] consists entirely of odd (decimal) digits. For instance, $36 + 63 = 99$ and $409 + 904 = 1313$. We will call such numbers reversible; so 36, 63, 409, and 904 are reversible. Leading zeroes are not allowed in either $n$ or $reverse(n)$. +Деякі натуральні числа $n$ мають властивість, що сума [ $n + reverse(n)$ ] повністю складається з непарних (десяткових) цифр. Наприклад, $36 + 63 = 99$ та $409 + 904 = 1313$. Називатимемо такі числа оборотними; таким чином 36, 63, 409 і 904 є оборотними. $n$ та $reverse(n)$ не можуть починатись з нуля. -There are 120 reversible numbers below one-thousand. +Існує 120 оборотних чисел менших за тисячу. -How many reversible numbers are there below one-billion (${10}^9$)? +Скільки існує оборотних чисел, що менші за один мільярд (${10}^9$)? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-146-investigating-a-prime-pattern.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-146-investigating-a-prime-pattern.md index 5a3c79b3f9a..c96a7796bc9 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-146-investigating-a-prime-pattern.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-146-investigating-a-prime-pattern.md @@ -1,6 +1,6 @@ --- id: 5900f3fe1000cf542c50ff11 -title: 'Problem 146: Investigating a Prime Pattern' +title: 'Завдання 146: вивчення моделі простих чисел' challengeType: 1 forumTopicId: 301775 dashedName: problem-146-investigating-a-prime-pattern @@ -8,9 +8,9 @@ dashedName: problem-146-investigating-a-prime-pattern # --description-- -The smallest positive integer $n$ for which the numbers $n^2 + 1$, $n^2 + 3$, $n^2 + 7$, $n^2 + 9$, $n^2 + 13$, and $n^2 + 27$ are consecutive primes is 10. The sum of all such integers $n$ below one-million is 1242490. +Найменше натуральне число $n$, за якого $n^2 + 1$, $n^2 + 3$, $n^2 + 7$, $n^2 + 9$, $n^2 + 13$ та $n^2 + 27$ є послідовними простими числами, становить 10. Сума усіх таких цілих чисел $n$ менших за один мільйон становить 1242490. -What is the sum of all such integers $n$ below 150 million? +Якою буде сума усіх таких цілих чисел $n$ менших за 150 мільйонів? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-147-rectangles-in-cross-hatched-grids.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-147-rectangles-in-cross-hatched-grids.md index a4a8055cdf8..3a44521ec11 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-147-rectangles-in-cross-hatched-grids.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-147-rectangles-in-cross-hatched-grids.md @@ -1,6 +1,6 @@ --- id: 5900f3ff1000cf542c50ff12 -title: 'Problem 147: Rectangles in cross-hatched grids' +title: 'Завдання 147: прямокутники у замальованих сітках' challengeType: 1 forumTopicId: 301776 dashedName: problem-147-rectangles-in-cross-hatched-grids @@ -8,17 +8,17 @@ dashedName: problem-147-rectangles-in-cross-hatched-grids # --description-- -In a 3x2 cross-hatched grid, a total of 37 different rectangles could be situated within that grid as indicated in the sketch. +У сітці 3х2 всього може бути розташовано 37 різних прямокутників, як зазначено на ескізі. -ways of situating different rectangles within cross-hatched 3x2 grid +способи розміщення різних прямокутників в сітці з перехресним штрихуванням розміром 3x2 -There are 5 grids smaller than 3x2, vertical and horizontal dimensions being important, i.e. 1x1, 2x1, 3x1, 1x2 and 2x2. If each of them is cross-hatched, the following number of different rectangles could be situated within those smaller grids: +5 сіток менші за 3х2, при цьому враховано горизонтальні та вертикальні виміри: 1x1, 2x1, 3x1, 1x2 та 2x2. Якщо кожна з них замальована, то в менших сітках можна розмістити певну кількість прямокутників: $$\begin{array}{|c|c|} \hline 1 \times 1 & 1 \\\\ \hline 2 \times 1 & 4 \\\\ \hline 3 \times 1 & 8 \\\\ \hline 1 \times 2 & 4 \\\\ \hline 2 \times 2 & 18 \\\\ \hline \end{array}$$ -Adding those to the 37 of the 3x2 grid, a total of 72 different rectangles could be situated within 3x2 and smaller grids. +Додаючи їх до 37 прямокутників з сітки розміром 3x2, загалом можна розмістити 72 різних прямокутники у сітках розміром 3x2 і менших. -How many different rectangles could be situated within 47x43 and smaller grids? +Скільки різних прямокутників можна розмістити в межах сіток розміром 47x43 і менших? # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-148-exploring-pascals-triangle.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-148-exploring-pascals-triangle.md index c7cccafb883..52ef670bbae 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-148-exploring-pascals-triangle.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-101-to-200/problem-148-exploring-pascals-triangle.md @@ -1,6 +1,6 @@ --- id: 5900f4021000cf542c50ff14 -title: 'Problem 148: Exploring Pascal''s triangle' +title: 'Завдання 148: вивчення трикутника Паскаля' challengeType: 1 forumTopicId: 301777 dashedName: problem-148-exploring-pascals-triangle @@ -8,7 +8,7 @@ dashedName: problem-148-exploring-pascals-triangle # --description-- -We can easily verify that none of the entries in the first seven rows of Pascal's triangle are divisible by 7: +Ми можемо легко перевірити, що жоден елемент у перших семи рядах трикутника Паскаля не ділиться на 7: ```markup 1 @@ -20,11 +20,11 @@ We can easily verify that none of the entries in the first seven rows of Pascal' 1 6 15 20 15 6 1 ``` -However, if we check the first one hundred rows, we will find that only 2361 of the 5050 entries are not divisible by 7. +Однак, якщо ми перевіряємо перші сто рядів, то виявимо, що лише 2361 з 5050 елементів не діляться на 7. # --instructions-- -Find the number of entries which are not divisible by 7 in the first one billion (${10}^9$) rows of Pascal's triangle. +Знайдіть кількість елементів, які не діляться на 7 у першому мільярді (${10}^9$) рядків трикутника Паскаля. # --hints-- diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-301-to-400/problem-350-constraining-the-least-greatest-and-the-greatest-least.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-301-to-400/problem-350-constraining-the-least-greatest-and-the-greatest-least.md index 6a023b73d45..70585e8839f 100644 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-301-to-400/problem-350-constraining-the-least-greatest-and-the-greatest-least.md +++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-301-to-400/problem-350-constraining-the-least-greatest-and-the-greatest-least.md @@ -10,7 +10,7 @@ dashedName: problem-350-constraining-the-least-greatest-and-the-greatest-least A list of size $n$ is a sequence of $n$ natural numbers. Examples are (2, 4, 6), (2, 6, 4), (10, 6, 15, 6), and (11). -The greatest common divisor, or $gcd$, of a list is the largest natural number that divides all entries of the list. Приклади: $gcd(2, 6, 4) = 2$, $gcd(10, 6, 15, 6) = 1$ та $gcd(11) = 11$. +The greatest common divisor, or $gcd$, of a list is the largest natural number that divides all entries of the list. Приклади: $нсд(2, 6, 4) = 2$, $нсд(10, 6, 15, 6) = 1$ та $нсд(11) = 11$. The least common multiple, or $lcm$, of a list is the smallest natural number divisible by each entry of the list. Приклади: $lcm(2, 6, 4) = 12$, $lcm(10, 6, 15, 6) = 30$ та $lcm(11) = 11$. diff --git a/curriculum/dictionaries/chinese-traditional/comments.json b/curriculum/dictionaries/chinese-traditional/comments.json index 6666172398d..550d16bb876 100644 --- a/curriculum/dictionaries/chinese-traditional/comments.json +++ b/curriculum/dictionaries/chinese-traditional/comments.json @@ -98,8 +98,8 @@ "bheu99": "這將保存一個集合", "x1djjr": "在下一行使用 console.clear(),清除瀏覽器控制檯的內容", "22ta95": "使用 console.log() 打印輸出變量", - "owgrP6": "Use the classes ABOVE this line", - "oszrtn": "Use the classes BELOW this line", + "owgrP6": "使用該行上方的類", + "oszrtn": "使用該行下方的類", "w43c7l": "使用 s = [2, 5, 7] 將無效", "pgckoj": "變量賦值", "2xiqvv": "變量聲明", diff --git a/curriculum/dictionaries/chinese/comments.json b/curriculum/dictionaries/chinese/comments.json index 2540f3ac680..0f2698bf088 100644 --- a/curriculum/dictionaries/chinese/comments.json +++ b/curriculum/dictionaries/chinese/comments.json @@ -98,8 +98,8 @@ "bheu99": "这将保存一个集合", "x1djjr": "在下一行使用 console.clear(),清除浏览器控制台的内容", "22ta95": "使用 console.log() 打印输出变量", - "owgrP6": "Use the classes ABOVE this line", - "oszrtn": "Use the classes BELOW this line", + "owgrP6": "使用该行上方的类", + "oszrtn": "使用该行下方的类", "w43c7l": "使用 s = [2, 5, 7] 将无效", "pgckoj": "变量赋值", "2xiqvv": "变量声明",