mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-20 12:03:11 -04:00
chore(i18n,learn): processed translations (#51614)
This commit is contained in:
@@ -30,10 +30,10 @@ var sumTwoAnd = addTogether(2);
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` يجب ان يعيد 53.
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` should return `undefined`.
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -40,6 +40,28 @@ Your app should serve asset files from the `/public` directory to the `/public`
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
أضف عنصر `div` في `body`.
|
||||
|
||||
عيّن سمة `class` بقيمة `canvas`. على سبيل المثال، `<div class="my-div">`.
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
هذا سيعمل كـ canvas للوحتك.
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@ var sumTwoAnd = addTogether(2);
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` 應返回 53。
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` 應返回 `undefined`。
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -40,6 +40,28 @@ HTML 服務器通常有一個或多個用戶可以訪問的目錄。 你可以
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
在 `body` 中添加一個 `div` 元素。
|
||||
|
||||
將 `class` 屬性設置爲等於 `canvas`。 例如,`<div class="my-div">`。
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
這將作爲你繪畫的畫布。
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@ var sumTwoAnd = addTogether(2);
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` 应返回 53。
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` 应返回 `undefined`。
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -40,6 +40,28 @@ HTML 服务器通常有一个或多个用户可以访问的目录。 你可以
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
在 `body` 中添加一个 `div` 元素。
|
||||
|
||||
将 `class` 属性设置为等于 `canvas`。 例如,`<div class="my-div">`。
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
这将作为你绘画的画布。
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@ Si cualquiera de los dos argumentos no es un número válido, devuelve undefined
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` debe devolver 53.
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` should return `undefined`.
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -40,6 +40,28 @@ Tu aplicación debe servir archivos de recursos desde el directorio `/public` a
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
Agregue un elemento `div` en el `body`.
|
||||
|
||||
Establezca el atributo `class` igual a `canvas`. Por ejemplo,`<div class="my-div">`.
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
Esto actuará como el lienzo para su pintura.
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@ Wenn eines der beiden Argumente keine gültige Zahl ist, wird undefined zurückg
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` sollte 53 zurückgeben.
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` sollte `undefined` zurückgeben.
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -40,6 +40,28 @@ Deine Anwendung sollte Asset-Dateien des `/public`-Verzeichnisses an den `/publi
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-8
|
||||
|
||||
Eine nützliche Eigenschaft einer _SVG_ (scalable vector graphics, skalierbare Vektorgrafiken) ist, dass dieses ein `path`-Attribut enthält, mit welchem ein Bild, ohne die Auflösung des Resultats zu beeinflussen, skaliert werden kann.
|
||||
|
||||
Derzeit übernimmt das `img` die Ursprungsgröße, welche aber zu groß ist. CSS has a `max` function which returns the largest of a set of comma-separated values. For example:
|
||||
Derzeit übernimmt das `img` die Ursprungsgröße, welche aber zu groß ist. CSS verfügt über eine `max`-Funktion, die den größte Wert einer durch Kommata getrennten Menge von Werten zurückgibt. Zum Beispiel:
|
||||
|
||||
```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.
|
||||
In diesem Beispiel haben `img`-Elemente eine Mindestbreite von `250px`. Und wenn der Viewport wächst, wächst das Bild entsprechend auf 25 Prozent der Breite des Viewports.
|
||||
|
||||
Skaliere das Bild, indem du seine `id` als Selektor verwendest und die `width` auf das Maximale von `100px` oder `18vw` setzt.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `#logo` selector to target the `img` element.
|
||||
Du solltest den `#logo`-Selektor verwenden, um das `img`-Element auszuwählen.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
|
||||
```
|
||||
|
||||
You should give the `img` a `width` of `max(100px, 18vw)`.
|
||||
Du solltest dem `img` eine `width` mit dem Wert `max(100px, 18vw)` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
As you've seen in the previous projects, webpages should start with a `DOCTYPE html` declaration, followed by an `html` element.
|
||||
Wie du in den vorherigen Projekten gesehen hast, sollten Webseiten mit einer `DOCTYPE html`-Deklaration beginnen, gefolgt von einem `html`-Element.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
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:
|
||||
Beachte, dass das `title`-Element den Suchmaschinen zusätzliche Informationen über die Seite gibt. Außerdem wird der Inhalt des `title`-Element auf zwei weitere Arten angezeigt:
|
||||
|
||||
* in the title bar when the page is open
|
||||
* in der Titelleiste, wenn die Seite geöffnet ist
|
||||
* 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.
|
||||
|
||||
Niste innerhalb des `head`-Elements ein `title`-Element mit dem Text `Colored Markers`.
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-7
|
||||
|
||||
In diesem Projekt wirst du mit einer externen CSS-Datei arbeiten, um die Seite zu gestalten. Wir haben bereits eine `styles.css` für dich erstellt. Aber bevor du sie benutzen kannst, musst du sie mit der Seite verlinken.
|
||||
|
||||
Nest a `link` element within the `head` element. Weise ihm ein `rel`-Attribut mit `stylesheet` und ein `href`-Attribut mit `styles.css` zu.
|
||||
Bette ein `link`-Element in das `head`-Element ein. Weise ihm ein `rel`-Attribut mit `stylesheet` und ein `href`-Attribut mit `styles.css` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Deine Markierung würde besser aussehen, wenn sie auf der Seite zentriert wäre.
|
||||
|
||||
Im letzten Projekt hast du den Marginbereich von Elementen separat mit Eigenschaften wie `margin-top` und `margin-left` festgelegt. Die zusammenfassende `margin`-Eigenschaft macht es einfach mehrere Marginbereiche gleichzeitig festzulegen.
|
||||
|
||||
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`.
|
||||
Um deine Markierung auf der Seite zu zentrieren, setze ihre `margin`-Eigenschaft auf `auto`. Dies setzt `margin-top`, `margin-right`, `margin-bottom` und `margin-left` jeweils auf `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
A color wheel is a circle where similar colors, or <dfn>hues</dfn>, are near each other, and different ones are further apart. For example, pure red is between the hues rose and orange.
|
||||
Ein Farbkreis ist ein Kreis, in dem ähnliche Farben oder <dfn>Farbtöne</dfn> nahe beieinander liegen und unterschiedliche Farben weiter voneinander entfernt sind. Zum Beispiel ist pures rot zwischen den Farbtönen rosa und orange.
|
||||
|
||||
Two colors that are opposite from each other on the color wheel are called <dfn>complementary colors</dfn>. 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.
|
||||
Zwei Farben, die sich im Farbkreis gegenüber stehen, werden <dfn>Komplementärfarben</dfn> genannt. Wenn zwei Komplementärfarben kombiniert werden, erzeugen sie die Farbe grau. Wenn sie aber nebeneinander platziert werden, erzeugen diese Farben einen starken visuellen Kontrast und wirken heller.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
And in the `h1` CSS rule, remove the `background-color` property and value to go back to the default white color.
|
||||
Entferne in der `h1`-CSS-Regel die `background-color`-Eigenschaft und den Wert, um zur standardmäßigen weißen Farbe zurückzukehren.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-46
|
||||
|
||||
A very common way to apply color to an element with CSS is with <dfn>hexadecimal</dfn> or hex values. While hex values sound complicated, they're really just another form of RGB values.
|
||||
|
||||
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`.
|
||||
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. Zum Beispiel: `#4B5320`.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-65
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
Wenn kein `gradientDirection`-Argument für die `linear-gradient`-Funktion angegeben ist, werden die Farben standardmäßig von oben nach unten oder entlang einer 180-Grad-Linie geordnet.
|
||||
|
||||
Bereinige deinen Code noch ein bisschen mehr, indem du das Argument `gradientDirection` aus beiden `linear-gradient`-Funktionen entfernst.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 6494da0daf5df5197963671d
|
||||
title: Step 8
|
||||
title: Schritt 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
@@ -9,13 +9,13 @@ dashedName: step-8
|
||||
|
||||
Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
|
||||
|
||||
The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
|
||||
The `box-sizing` property is used to set this behavior. Standardmäßig wird das `content-box`-Modell verwendet. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding- und Rand-Werte werden der Gesamtbreite hinzugefügt, so dass das Elemente wächst, um diese Werte aufzunehmen.
|
||||
|
||||
Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
|
||||
Versuche, `box-sizing` auf `content-box` mit dem globalen `*`-Selektor festzulegen. Zu diesem Zeitpunkt wirst du keine Änderungen sehen, da du den Standardwert verwendest.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `*` selector.
|
||||
Du solltest einen `*`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
|
||||
|
||||
@@ -17,7 +17,7 @@ Du solltest einen `h2, h3, h4, h5, h6`-Selektor haben.
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6'));
|
||||
```
|
||||
|
||||
Your `h2, h3, h4, h5, h6` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`.
|
||||
Dein `h2, h3, h4, h5, h6`-Selektor sollte eine `font-family`-Eigenschaft von `Raleway` mit einem Fallback von `sans-serif` enthalten.
|
||||
|
||||
```js
|
||||
const fontFamily = new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')?.fontFamily;
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
Du möchtest den gleichen Farbverlauf zu den nächsten zwei Abschnitten hinzufügen. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector.
|
||||
Du möchtest den gleichen Farbverlauf zu den nächsten zwei Abschnitten hinzufügen. Erstelle stattdessen einen neuen Klassen-Selektor namens `bb1-window` und verschiebe die `height`- sowie `background`-Eigenschaften und Werte von `.bb1a` zum neuen Klassen-Selektor.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Du brauchst die `height` oder `background-color`-Eigenschaften in `.bb1a`, `.bb1
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `background-color` from `.bb1a`.
|
||||
Du solltest die `background-color` aus `.bb1a` entfernen.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
|
||||
|
||||
@@ -41,7 +41,7 @@ Du solltest `.bb2a` eine `height` von `5vw` geben.
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
|
||||
```
|
||||
|
||||
You should give `.bb2a` a `border-top` of `1vw solid #000`.
|
||||
Du solltest `.bb2a` eine `border-top` von `1vw solid #000` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-57
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building.
|
||||
Entferne die `margin`- und `border-top`-Eigenschaften und Werte aus `.bb2a`, um es in ein Dreieck für die Spitze des Gebäudes zu verwandeln.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-62
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
Das nächste Bauelement wird aus drei Abschnitten bestehen. Verschachtele drei `div`-Elemente innerhalb von `.bb4`. Gib ihnen in dieser Reihenfolge die Klassen `bb4a`, `bb4b` und `bb4c`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Füge die neue `window-wrap`-Klasse zum `.bb4c`-Element hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a class of `window-wrap` to `.bb4c`.
|
||||
Du solltest eine Klasse von `window-wrap` zu `.bb4c` hinzufügen.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4c.window-wrap"));
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-73
|
||||
|
||||
# --description--
|
||||
|
||||
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`.
|
||||
Sieht gut aus! Auf zu den Vordergrundgebäuden! 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--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-90
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`.
|
||||
Entferne die `background-color`-Eigenschaft und den Wert aus `.fb3` und füge sie zu `.fb3a` und `.fb3b` hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,13 +17,13 @@ Du solltest die `background-color` aus `.fb3` entfernen.
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
|
||||
```
|
||||
|
||||
You should give `.fb3a` a `background-color` of `--building-color1`.
|
||||
Du solltest `.fb3a` eine `background-color` mit `--building-color1` als Wert zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
|
||||
```
|
||||
|
||||
You should give `.fb3b` a `background-color` of `--building-color1`.
|
||||
Du solltest `.fb3b` eine `background-color` mit `--building-color1` als Wert zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-92
|
||||
|
||||
# --description--
|
||||
|
||||
Bette drei neue `div`-Elemente in das erste `.fb3a`-Element ein. Give them each a class of `fb3-window`. Dies werden Fenster für diesen Abschnitt sein.
|
||||
Bette drei neue `div`-Elemente in das erste `.fb3a`-Element ein. Weise ihnen jeweils die Klasse `fb3-window` zu. Dies werden Fenster für diesen Abschnitt sein.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,7 +17,7 @@ Du solltest drei `div`-Elemente innerhalb des ersten `.fb3a`-Elements hinzufüge
|
||||
assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
|
||||
```
|
||||
|
||||
You should give each new `div` a class of `fb3-window`.
|
||||
Du solltest jedem neuen `div` die Klasse `fb3-window` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-95
|
||||
|
||||
# --description--
|
||||
|
||||
With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`.
|
||||
Mit CSS-Variablen kannst du die Werte ändern, ohne das Stylesheet nach ihnen durchsuchen zu müssen. Ändere den `--window-color1`-Wert zu `#bb99ff`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should change the value of `--window-color1` to `#bb99ff`.
|
||||
Du solltest den Wert von `--window-color1` zu `#bb99ff` ändern.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-104
|
||||
|
||||
# --description--
|
||||
|
||||
On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`.
|
||||
Auf zum nächsten Bauelement! Es ist das grüne Element im Vordergrund. Weise ihm einen `repeating-linear-gradient` mit deiner Baufarbe von `0%` bis `5%` und `transparent` von `5%` bis `10%` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,19 +17,19 @@ Du solltest `.fb5` eine `background`-Eigenschaft zuweisen.
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
|
||||
```
|
||||
|
||||
You should give the `background` a `repeating-linear-gradient`.
|
||||
Du solltest dem `background` einen `repeating-linear-gradient` zuweisen.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
|
||||
```
|
||||
|
||||
You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`.
|
||||
Du solltest dem `repeating-linear-gradient` eine erste Farbe von `--building-color2` von `0%` bis `5%` zuweisen.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
|
||||
```
|
||||
|
||||
You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`.
|
||||
Du solltest dem `repeating-linear-gradient` eine zweite Farbe von `transparent` von `5%` bis `10%` zuweisen.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-107
|
||||
|
||||
# --description--
|
||||
|
||||
Endlich! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`.
|
||||
Endlich! Du hast es bis zum letzten Bauelement geschafft! Füge ihm einen wiederholenden Farbverlauf mit einer `90deg` Richtung hinzu. Verwende die Baufarbe von `0%` bis `10%` und `transparent` von `10%` bis `30%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,19 +17,19 @@ Du solltest in der `background`-Eigenschaft einen `repeating-linear-gradient` zu
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient");
|
||||
```
|
||||
|
||||
You should give the `repeating-linear-gradient` a direction of `90deg`.
|
||||
Du solltest dem `repeating-linear-gradient` eine Richtung von `90deg` zuweisen.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
|
||||
```
|
||||
|
||||
You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
|
||||
Du solltest dem `repeating-linear-gradient` eine erste Farbe von `--building-color3` von `0%` bis `10%` zuweisen.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
|
||||
```
|
||||
|
||||
You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`.
|
||||
Du solltest dem `repeating-linear-gradient` eine zweite Farbe `transparent` von `10%` bis `30%` zuweisen.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-108
|
||||
|
||||
# --description--
|
||||
|
||||
Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors.
|
||||
Füge einen weiteren sich wiederholenden Farbverlauf zu diesem Bauelement hinzu; gestalte ihn genauso wie den, den du eben hinzugefügt hast, füge jedoch die `90deg`-Richtung nicht hinzu und verwende die Farbe deines Fensters anstelle der beiden `transparent`-Farben.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,13 +17,13 @@ Du solltest `.fb6` einen zweiten `repeating-linear-gradient` innerhalb der `back
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/);
|
||||
```
|
||||
|
||||
You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`.
|
||||
Du solltest dem zweiten `repeating-linear-gradient` eine erste Farbe von `--building-color3` von `0%` bis `10%` zuweisen.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
|
||||
```
|
||||
|
||||
You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`.
|
||||
Du solltest dem zweiten `repeating-linear-gradient` eine zweite Farbe von `--window-color3` von `10%` bis `30%` zuweisen.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/);
|
||||
|
||||
@@ -27,7 +27,7 @@ Dein `ol`-Element sollte ein schließendes Tag haben. Schließende Tags haben ei
|
||||
assert(code.match(/<\/ol>/));
|
||||
```
|
||||
|
||||
The `ol` element should be above the second `section` element's closing tag. Sie sind in falscher Reihenfolge.
|
||||
Das `ol`-Element sollte über dem abschließenden Tag des `section`-Elements liegen. Sie sind in falscher Reihenfolge.
|
||||
|
||||
```js
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'OL');
|
||||
|
||||
@@ -13,7 +13,7 @@ Füge innerhalb des dritten `section`-Elements ein `h2`-Element mit dem Text hin
|
||||
|
||||
# --hints--
|
||||
|
||||
Das dritte `section`-Element kann nicht gefunden werden. You may have accidentally deleted it or the opening tag or closing tag.
|
||||
Das dritte `section`-Element kann nicht gefunden werden. Möglicherweise hast du das Element oder das öffnende oder abschließende Tag versehentlich gelöscht.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -22,7 +22,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h2` element should have an opening tag and closing tag. Möglicherweise fehlt einer oder beide erforderlichen Tags.
|
||||
Dein `h2`-Element sollte ein öffnendes und ein abschließendes Tag enthalten. Möglicherweise fehlt einer oder beide erforderlichen Tags.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -31,13 +31,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Du solltest nur ein `h2`-Element hinzufügen. Please remove any extras.
|
||||
Du solltest nur ein `h2`-Element hinzufügen. Entferne bitte alles Zusätzliche.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('h2').length === 3);
|
||||
```
|
||||
|
||||
The new `h2` element should be located right above the third `section` element's closing tag.
|
||||
Das neue `h2`-Element sollte sich direkt über dem abschließenden Tag des dritten `section`-Elements befinden.
|
||||
|
||||
```js
|
||||
const thirdSection = document.querySelectorAll('section')[2];
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
The `action` attribute indicates where form data should be sent. Zum Beispiel teilt `<form action="/submit-url"></form>` dem Browser mit, dass die Formulardaten an den Pfad `/submit-url` gesendet werden sollten.
|
||||
Das `action`-Attribut gibt an, wohin Daten gesendet werden sollten. Zum Beispiel teilt `<form action="/submit-url"></form>` dem Browser mit, dass die Formulardaten an den Pfad `/submit-url` gesendet werden sollten.
|
||||
|
||||
Füge ein `action`-Attribut mit dem Wert `https://freecatphotoapp.com/submit-cat-photo` zum `form`-Element hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `form` element should have an opening tag and closing tag in the correct order. Es kann sein, dass eine oder beide der erforderlichen Tags fehlen oder in der falschen Reihenfolge sind.
|
||||
Dein `form`-Element sollte ein öffnendes und abschließendes Tag in der richtigen Reihenfolge haben. Es kann sein, dass eine oder beide der erforderlichen Tags fehlen oder in der falschen Reihenfolge sind.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
|
||||
@@ -19,7 +19,7 @@ Dein `button`-Element sollte ein öffnendes Tag haben. Öffnende Tags haben dies
|
||||
assert(document.querySelector('button'));
|
||||
```
|
||||
|
||||
Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character.
|
||||
Dein `button`-Element sollte ein abschließendes Tag enthalten. Abschließende Tags enthalten ein `/` direkt nach dem `<`-Zeichen.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/button\>/));
|
||||
|
||||
@@ -21,7 +21,7 @@ Das `input`-Element für dein Kontrollkästchen sollte ein öffnendes Tag, aber
|
||||
assert($('fieldset > input') && !code.match(/<\/input\>/g));
|
||||
```
|
||||
|
||||
Du solltest nur ein Eingabe-Element für dein Kontrollkästchen hinzugefügt haben. Remove any extras.
|
||||
Du solltest nur ein Eingabe-Element für dein Kontrollkästchen hinzugefügt haben. Entferne alle zusätzlichen.
|
||||
|
||||
```js
|
||||
assert($('fieldset > input').length === 1);
|
||||
|
||||
@@ -9,23 +9,23 @@ dashedName: step-57
|
||||
|
||||
Füge das `name`-Attribut mit dem Wert `personality` zum `input`-Checkbox-Element hinzu.
|
||||
|
||||
While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes.
|
||||
Während du dies im Browser nicht bemerkst, erleichtert dies die Verarbeitung deines Webformulars durch einen Server, insbesondere wenn mehrere Checkboxen vorhanden sind.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should make sure the checkbox is still present.
|
||||
Du solltest sicherstellen, dass die Checkbox weiterhin vorhanden ist.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0]);
|
||||
```
|
||||
|
||||
Das `input`-Checkbox-Element enthält kein `name`-Attribut. Check that there is a space after the opening tag's name.
|
||||
Das `input`-Checkbox-Element enthält kein `name`-Attribut. Überprüfe, ob es ein Leerzeichen nach dem Namen des öffnenden Tags gibt.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0].hasAttribute('name'));
|
||||
```
|
||||
|
||||
Das `input`-Checkbox-Element sollte ein `name`-Attribut mit dem Wert `personality` enthalten. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.
|
||||
Das `input`-Checkbox-Element sollte ein `name`-Attribut mit dem Wert `personality` enthalten. Du hast entweder den Wert weggelassen oder einen Tippfehler gemacht. Beachte, dass Attributwerte zwischen Anführungszeichen stehen sollten.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-39
|
||||
|
||||
# --description--
|
||||
|
||||
In order for a form's data to be accessed by the location specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: `<input type="text" name="email">`.
|
||||
In order for a form's data to be accessed by the location specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. Zum Beispiel kannst du die folgende Syntax für ein E-Mail-Adressfeld verwenden: `<input type="text" name="email">`.
|
||||
|
||||
Füge das `name`-Attribut mit dem Wert `catphotourl` zu deinem Textfeld hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du hast entweder dein `input`-Element gelöscht oder es hat eine ungültige Syntax. All attributes' values should be surrounded by quotation marks.
|
||||
Du hast entweder dein `input`-Element gelöscht oder es hat eine ungültige Syntax. Alle Attributwerte sollten zwischen Anführungszeichen stehen.
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
|
||||
@@ -11,13 +11,13 @@ Within the `body`, provide a heading context for the content, by adding an `h1`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `h1` within the `body`.
|
||||
Du solltest das `h1` innerhalb des `body` hinzufügen.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > h1'));
|
||||
```
|
||||
|
||||
You should give the `h1` the text `Registration Form`.
|
||||
Du solltest dem `h1` den Text `Registration Form` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
Now, get rid of the horizontal scroll-bar, by setting the `body` default `margin` added by some browsers to `0`.
|
||||
Enferne nun die horizontale Scrollleiste, indem du die standardmäßige `margin` des `body`, die von einigen Browsern hinzugefügt wird, auf `0` setzt.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,7 +17,7 @@ Du solltest `margin` innerhalb des `body`-Elementselektors hinzufügen.
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin);
|
||||
```
|
||||
|
||||
You should give the `margin` a value of `0`.
|
||||
Du solltest der `margin` einen Wert von `0` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-33
|
||||
|
||||
# --description--
|
||||
|
||||
Mit dem `select`-Element kann man dem Formular leicht einen Dropdown hinzufügen. Das `select`-Element ist ein Container für eine Gruppe von `option`-Elementen und das `option`-Element fungiert als Label für jede Dropdown-Option. Both elements require closing tags.
|
||||
Mit dem `select`-Element kann man dem Formular leicht einen Dropdown hinzufügen. Das `select`-Element ist ein Container für eine Gruppe von `option`-Elementen und das `option`-Element fungiert als Label für jede Dropdown-Option. Beide Elemente erfordern abschließende Tags.
|
||||
|
||||
Beginne, indem du unter den beiden `label`-Elementen ein `select`-Element hinzufügst. Bette dann innerhalb des `select`-Elements 5 `option`-Elemente ein.
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-63
|
||||
|
||||
# --description--
|
||||
|
||||
Last, but not least, change the text color of the `terms and conditions` link to `#dfdfe2`.
|
||||
Zu guter Letzt sollest du die Textfarbe des `terms and conditions`-Links zu `#dfdfe2` ändern.
|
||||
|
||||
Well done! Du hast den letzten Teil des _Registration Form_-Übungsprojekts abgeschlossen.
|
||||
Gut gemacht! Du hast den letzten Teil des _Registration Form_-Übungsprojekts abgeschlossen.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,19 +11,19 @@ Füge ein `link`-Element innerhalb deines `head`-Elements hinzu. Setze für das
|
||||
|
||||
# --hints--
|
||||
|
||||
Your should have a `link` element.
|
||||
Du solltest ein `link`-Element haben.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute set to `stylesheet`.
|
||||
Dein `link`-Element sollte ein `rel`-Attribut auf `stylesheet` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link\s+rel=("|'|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `./styles.css`.
|
||||
Dein `link`-Element sollte ein `href`-Attribut mit dem Wert `./styles.css` enthalten.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link\s+rel=("|'|`)stylesheet\1\s+href=\1\.\/styles\.css\1\s*\/?>/)
|
||||
|
||||
@@ -9,13 +9,13 @@ dashedName: step-26
|
||||
|
||||
Um das rechte Ohr richtig zu positioneren, kannst du CSS-Transform verwenden, um es um einen bestimmten Grad zu drehen.
|
||||
|
||||
Mit der `transform`-Eigenschaft kannst du die Form, Position und Größe eines Elements ändern, ohne das Layout zu verändern oder die umliegenden Elemente zu beeinflussen. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`.
|
||||
Mit der `transform`-Eigenschaft kannst du die Form, Position und Größe eines Elements ändern, ohne das Layout zu verändern oder die umliegenden Elemente zu beeinflussen. Sie enthält Funktionen wie `translate()`, `rotate()`, `scale()`, `skew()` und `matrix()`.
|
||||
|
||||
Set the `transform` property to `rotate(-45deg)` and see what happens.
|
||||
Setze die `transform`-Eigenschaft auf `rotate(-45deg)` und sieh, was passiert.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semi-colon.
|
||||
Du solltest die `transform`-Eigenschaft deines `.cat-left-ear`-Elements auf `rotate(-45deg)` setzen. Vergiss nicht, ein Semikolon hinzuzufügen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)')
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
---
|
||||
id: 646cfd853634255d02b64cc1
|
||||
title: Step 32
|
||||
title: Schritt 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show.
|
||||
That's not the behavior you want. Die Ohren sollten über dem Kopf angezeigt werden, damit die Ränder, die sich mit ihnen überschneiden, nicht sichtbar sind.
|
||||
|
||||
Instead of `-1`, set the `z-index` property of the left ear to `1`.
|
||||
Setze die `z-index`-Eigenschaft des linken Ohrs anstelle von `-1` auf `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon.
|
||||
Dein `.cat-left-ear`-Selektor sollte einen `z-index` mit dem Wert `1` enthalten. Vergiss nicht, ein Semikolon hinzuzufügen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1')
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
---
|
||||
id: 646dd6f9caa862627dd87772
|
||||
title: Step 35
|
||||
title: Schritt 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`.
|
||||
Bringe das innere Ohr mit einer `position`-Eigenschaft, die auf `absolute` gesetzt ist, einem `top` von `22px` und einem `left` von `-20px` in Position.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`.
|
||||
Dein `.cat-left-inner-ear`-Selektor sollte eine `position`-Eigenschaft auf `absolute` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`.
|
||||
Dein `.cat-left-inner-ear`-Selektor sollte eine `top`-Eigenschaft auf `22px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`.
|
||||
Dein `.cat-left-inner-ear`-Selektor sollte eine `left`-Eigenschaft auf `-20px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px')
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
---
|
||||
id: 646ddd3f9f97a0667b964bdb
|
||||
title: Step 41
|
||||
title: Schritt 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`.
|
||||
Erstelle innerhalb des `.cat-left-eye`-Elements ein weiteres `div`-Element mit der Klasse `cat-left-inner-eye`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-left-eye`.
|
||||
Du solltest dein vorhandenes `div`-Element mit der Klasse `cat-left-eye` nicht verändern.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-left-eye').length === 1);
|
||||
```
|
||||
|
||||
You should have a `div` element inside your `.cat-left-eye` element.
|
||||
Du solltest ein `div`-Element innerhalb deines `.cat-left-eye`-Elements haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-eye div').length === 1);
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-left-inner-eye`.
|
||||
Dein `div`-Element sollte die Klasse `cat-left-inner-eye` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye'));
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
---
|
||||
id: 646deb169847f86df0f95bfc
|
||||
title: Step 51
|
||||
title: Schritt 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`.
|
||||
Weise deinem `.cat-right-inner-eye`-Element mithilfe eines Klassenselektors eine Breite von `10px` und eine Höhe von `20px` zu. Weise ihm außerdem die Hintergrundfarbe `#fff` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-right-inner-eye` selector.
|
||||
Du solltest einen `.cat-right-inner-eye`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye'))
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `width` set to `10px`.
|
||||
Dein `.cat-right-inner-eye`-Selektor sollte eine `width` auf `10px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `height` set to `20px`.
|
||||
Dein `.cat-right-inner-eye`-Selektor sollte eine `height` auf `20px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`.
|
||||
Dein `.cat-right-inner-eye`-Selektor sollte eine `background-color` auf `#fff` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)')
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
---
|
||||
id: 646dec359bef3b7811fba5a6
|
||||
title: Step 52
|
||||
title: Schritt 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`.
|
||||
Bringe das rechte innere Auge mit einer `position` von `absolute`, einem `top` von `8px` und einem `left` von `18px` in Position. Weise ihm außerdem einen Randradius von `60%` zu und drehe es um `-5deg`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`.
|
||||
Dein `.cat-right-inner-eye`-Selektor sollte eine `position`-Eigenschaft auf `absolute` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `top` property set to `8px`.
|
||||
Dein `.cat-right-inner-eye`-Selektor sollte eine `top`-Eigenschaft auf `8px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`.
|
||||
Dein `.cat-right-inner-eye`-Selektor sollte eine `left`-Eigenschaft auf `18px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px')
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
---
|
||||
id: 646dedbcba062079128b2ecc
|
||||
title: Step 53
|
||||
title: Schritt 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`.
|
||||
Es ist an der Zeit, an der Nase zu arbeiten. Erstelle in deinem HTML ein `div`-Element mit der Klasse `cat-nose`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element.
|
||||
Du solltest ein `div`-Element erstellen.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 12)
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-nose`.
|
||||
Dein `div`-Element sollte die Klasse `cat-nose` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')[11].classList.contains('cat-nose'))
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
---
|
||||
id: 646df03c8f79337ab46f148b
|
||||
title: Step 55
|
||||
title: Schritt 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`.
|
||||
Bringe die Nase mit einer `position`-Eigenschaft von `absolute`, einem `top` von `108px` und einem `left` von `85px` in Position.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-nose` selector should have a `position` property set to `absolute`.
|
||||
Dein `.cat-nose`-Selektor sollte eine `position`-Eigenschaft auf `absolute` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `top` property set to `108px`.
|
||||
Dein `.cat-nose`-Selektor sollte eine `top`-Eigenschaft auf `108px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `left` property set to `85px`.
|
||||
Dein `.cat-nose`-Selektor sollte eine `left`-Eigenschaft auf `85px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px')
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
---
|
||||
id: 646df1d1aa4ae57bdf1869c4
|
||||
title: Step 57
|
||||
title: Schritt 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you will start working on the mouth. There will be a right line and left line for the mouth.
|
||||
Nun beginnst du mit der Bearbeitung des Mundes. Es wird eine rechte und linke Linie für den Mund geben.
|
||||
|
||||
Create a `div` element with the class `cat-mouth`.
|
||||
Erstelle ein `div`-Element mit der Klasse `cat-mouth`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element.
|
||||
Du solltest ein `div`-Element erstellen.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 13)
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-mouth`
|
||||
Dein `div`-Element sollte die Klasse `cat-mouth` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth'))
|
||||
|
||||
@@ -11,25 +11,25 @@ Inside the `.cat-whiskers` element, create two `div` elements with the class `ca
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-whiskers`
|
||||
Du solltest dein vorhandenes `div`-Element mit der Klasse `cat-whiskers` nicht verändern.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-whiskers').length === 1)
|
||||
```
|
||||
|
||||
You should have two `div` elements inside the `.cat-whiskers` element.
|
||||
Du solltest zwei `div`-Elemente innerhalb des `.cat-whiskers`-Element haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers div').length === 2)
|
||||
```
|
||||
|
||||
The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`.
|
||||
Das erste `div`-Element innerhalb des `.cat-whiskers`-Elements sollte die Klasse `cat-whiskers-left` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left'))
|
||||
```
|
||||
|
||||
The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`.
|
||||
Das zweite `div`-Element innerhalb des `.cat-whiskers`-Elements sollte die Klasse `cat-whiskers-right` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right'))
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
---
|
||||
id: 646f4e46e81f7021d5fd9c1d
|
||||
title: Step 78
|
||||
title: Schritt 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the top-right whisker at -10 degrees.
|
||||
Drehe das obere rechte Schnurrhaar um -10 Grad.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-10deg)`.
|
||||
Dein `.cat-whisker-right-top`-Selektor sollte eine `transform`-Eigenschaft auf `rotate(-10deg)` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)')
|
||||
|
||||
@@ -1,41 +1,41 @@
|
||||
---
|
||||
id: 6476fc5cf14b276e6d04e82a
|
||||
title: Step 13
|
||||
title: Schritt 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`.
|
||||
Weise deinem `.box`-Element mithilfe eines Klassenselektors eine Breite von `200px`, eine Höhe von `600px` und die Hintergrundfarbe `#000` zu. Weise ihm außerdem eine `position` von `absolute`, ein `top` von `800px` und ein `left` von `650px` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.box` selector.
|
||||
Du solltest einen `.box`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box'))
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `width` property set to `200px`.
|
||||
Dein `.box`-Selektor sollte eine `width`-Eigenschaft mit dem Wert `200px` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px')
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `height` property set to `600px`.
|
||||
Dein `.box`-Selektor sollte eine `height`-Eigenschaft mit dem Wert `600px` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px')
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `background-color` property set to `#000`.
|
||||
Dein `.box`-Selektor sollte eine `background-color`-Eigenschaft mit dem Wert `#000` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)')
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `position` property set to `absolute`.
|
||||
Dein `.box`-Selektor sollte eine `position`-Eigenschaft auf `absolute` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute')
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-34
|
||||
|
||||
# --description--
|
||||
|
||||
Schließlich musst du diese versteckten Elemente aus dem Dokumentenfluss herausnehmen. Weise dem `span[class~="sr-only"]`-Selektor eine `position`-Eigenschaft von `absolute`, eine `padding`-Eigenschaft von `0` und eine `margin`-Eigenschaft von `-1px` zu. This will ensure that not only are they no longer visible, but they are not even within the page view.
|
||||
Schließlich musst du diese versteckten Elemente aus dem Dokumentenfluss herausnehmen. Weise dem `span[class~="sr-only"]`-Selektor eine `position`-Eigenschaft von `absolute`, eine `padding`-Eigenschaft von `0` und eine `margin`-Eigenschaft von `-1px` zu. Dadurch wird sichergestellt, dass sie nicht nur nicht mehr sichtbar sind, sondern auch nicht mehr in der Seitenansicht liegen.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-53
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle einen Selektor, um deine `td`-Elemente innerhalb deines Tabellenkörpers auszuwählen. Weise ihnen eine Breite zu, um den Viewport mit einem Minimum und Maximum von `4rem` zu füllen. This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
|
||||
Erstelle einen Selektor, um deine `td`-Elemente innerhalb deines Tabellenkörpers auszuwählen. Weise ihnen eine Breite zu, um den Viewport mit einem Minimum und Maximum von `4rem` zu füllen. Auf diese Weise wird sichergestellt, dass die Breite fixiert ist, während eine spezielle Einstellung von `width` die Elemente auf die Breite des Containers schrumpfen lassen würde.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -29,7 +29,7 @@ Dein `tbody td`-Selektor sollte eine `min-width`-Eigenschaft von `4rem` haben.
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
|
||||
```
|
||||
|
||||
Your `tbody td` selector should have a `max-width` property set to `4rem`.
|
||||
Dein `tbody td`-Selektor sollte eine `max-width`-Eigenschaft von `4rem` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-57
|
||||
|
||||
# --description--
|
||||
|
||||
Der Hauptunterschied zwischen `tr[class="total"]` und `tr.total` ist, dass das erste `tr`-Elemente auswählen wird, bei denen die *einzige* Klasse `total` ist. The second will select `tr` elements where the class *includes* `total`.
|
||||
Der Hauptunterschied zwischen `tr[class="total"]` und `tr.total` ist, dass das erste `tr`-Elemente auswählen wird, bei denen die *einzige* Klasse `total` ist. Der zweite wird `tr`-Elemente auswählen, bei denen die Klasse `total` *enthält*.
|
||||
|
||||
In your case, `tr.total` will work. Du kannst diesen Selektor verwenden, um alle `td`-Elemente innerhalb deiner `.total`-Zeilen auszuwählen. Align the text to the right, and give them a padding of `0 0.25rem`.
|
||||
In deinem Fall wird `tr.total` funktionieren. Du kannst diesen Selektor verwenden, um alle `td`-Elemente innerhalb deiner `.total`-Zeilen auszuwählen. Richte den Text nach rechts und weise ihnen ein Padding von `0 0.25rem` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@ dashedName: step-6
|
||||
|
||||
Füge ein `div`-Element im `body` hinzu.
|
||||
|
||||
Setze das `class`-Attribut gleich `canvas`. For example, `<div class="my-div">`.
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
This will act as the canvas for your painting.
|
||||
Dies dient als Canvas für dein Bild.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-29
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
|
||||
Erstelle ein neues `div` unter deinem `.large`-Element und weise ihm ein `class`-Attribut von `calories-info` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -23,7 +23,7 @@ Dein neues `div` sollte ein `class`-Attribut auf `calories-info` gesetzt haben.
|
||||
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
|
||||
```
|
||||
|
||||
Your new `div` should come after the `.large` element.
|
||||
Dein neues `div` sollte nach dem `.large`-Element stehen.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));
|
||||
|
||||
@@ -30,10 +30,10 @@ Se uno dei due argomenti non è un numero valido, restituisce undefined.
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` dovrebbe restituire 53.
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` dovrebbe restituire `undefined`.
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -40,6 +40,28 @@ La tua app dovrebbe servire i file di risorsa dalla directory `/public` al perco
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
Aggiungi un elemento `div` all'interno del `body`.
|
||||
|
||||
Imposta l'attributo `class` su `canvas`. Ad esempio, `<div class="my-div">`.
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
Questo elemento fungerà da tela per il tuo dipinto.
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@ var sumTwoAnd = addTogether(2);
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` は 53 を返す必要があります。
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` should return `undefined`.
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -40,6 +40,28 @@ Express では、ミドルウェア `express.static(path)` を使用してこの
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
`body` 内に `div` 要素を追加してください。
|
||||
|
||||
`class` 属性を `canvas` に設定してください。 例えば `<div class="my-div">` のようにして設定します。
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
この要素が、あなたの絵画のキャンバスとなります。
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@ Se algum argumento não for um número válido, retorne undefined.
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` deve retornar 53.
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` deve retornar `undefined`.
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -22,7 +22,7 @@ GET - Lê um recurso existente sem modificá-lo,
|
||||
|
||||
PUT ou PATCH (às vezes, POST) – Atualiza um recurso usando os dados enviados,
|
||||
|
||||
DELETE - Delete a resource.
|
||||
DELETE - Exclui um recurso.
|
||||
|
||||
Existem também alguns outros métodos que são usados para estabelecer uma conexão com o servidor. Com a exceção de GET, todos os outros métodos listados acima podem ter uma payload(carga) (exemplo: os dados enviados no corpo da requisição). O middleware body-parser também funciona com esses métodos.
|
||||
|
||||
|
||||
@@ -40,12 +40,34 @@ Seu aplicativo deve servir arquivos de ativos do diretório `/public` no caminho
|
||||
);
|
||||
```
|
||||
|
||||
A aplicação não deve servir arquivos de outras pastas além do diretório `/public`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
Desafios de back-end não precisam de soluções,
|
||||
pois precisariam ser testados com relação a um projeto funcional completo.
|
||||
Confira nossas diretrizes de contribuição para saber mais.
|
||||
*/
|
||||
```
|
||||
|
||||
@@ -22,7 +22,7 @@ Se você usa o Replit, siga estas etapas para configurar o projeto:
|
||||
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para a solução no campo Solution Link. Como opção, envie também um link para o código-fonte do projeto no campo GitHub Link.
|
||||
|
||||
**Note:** This project's tests do not work when using `glitch.com`.
|
||||
**Observação:** os testes deste projeto não funcionam ao usar `glitch.com`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
@@ -32,7 +32,7 @@ Quando terminar, certifique-se de que uma demonstração funcional do seu projet
|
||||
- Para executar os testes, remova `NODE_ENV=test` dos comentários no seu arquivo `.env`
|
||||
- Para executar os testes no console, use o comando `npm run test`. Para abrir o console do Replit, pressione Ctrl+Shift+P (cmd, se estiver em um Mac) e digite "open shell"
|
||||
|
||||
Write the following tests in `tests/1_unit-tests.js`:
|
||||
Escreva os testes a seguir em `tests/1_unit-tests.js`:
|
||||
|
||||
- `convertHandler` deverá ler corretamente a entrada de números inteiros.
|
||||
- `convertHandler` deverá ler corretamente a entrada de números decimais.
|
||||
@@ -51,7 +51,7 @@ Write the following tests in `tests/1_unit-tests.js`:
|
||||
- `convertHandler` deve converter corretamente `lbs` para `kg`.
|
||||
- `convertHandler` deve converter corretamente `kg` para `lbs`.
|
||||
|
||||
Write the following tests in `tests/2_functional-tests.js`:
|
||||
Escreva os testes a seguir em `tests/2_functional-tests.js`:
|
||||
|
||||
- Converta uma entrada válida, como `10L`: solicitação de `GET` para `/api/convert`.
|
||||
- Converta uma entrada inválida, como `32g`: solicitação de `GET` para `/api/convert`.
|
||||
@@ -61,7 +61,7 @@ Write the following tests in `tests/2_functional-tests.js`:
|
||||
|
||||
# --hints--
|
||||
|
||||
You can provide your own project, not the example URL.
|
||||
Você pode fornecer seu próprio projeto, não o exemplo de URL.
|
||||
|
||||
```js
|
||||
getUserInput => {
|
||||
@@ -73,13 +73,13 @@ getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can `GET` `/api/convert` with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit)
|
||||
Você pode fazer a solicitação de `GET` `/api/convert` com um único parâmetro que contém um número e unidade aceitos e fazer com que sejam convertidos. (Dica: divida a entrada procurando o índice do primeiro caractere que vai marcar o início da unidade)
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
You can convert `'gal'` to `'L'` and vice versa. (1 gal to 3.78541 L)
|
||||
Você pode converter `'gal'` para `'L'` e vice-versa. (1 gal para 3.78541 L)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -102,7 +102,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can convert `'lbs'` to `'kg'` and vice versa. (1 lbs to 0.453592 kg)
|
||||
Você pode converter `'lbs'` para `'kg'` e vice-versa. (1 lbs para 0.453592 kg)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -125,7 +125,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can convert `'mi'` to `'km'` and vice versa. (1 mi to 1.60934 km)
|
||||
Você pode converter `'mi'` para `'km'` e vice-versa. (1 mi para 1.60934 km)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -148,7 +148,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All incoming units should be accepted in both upper and lower case, but should be returned in both the `initUnit` and `returnUnit` in lower case, except for liter, which should be represented as an uppercase `'L'`.
|
||||
Todas as unidades de entrada devem ser aceitas em letras maiúsculas e minúsculas, mas devem ser retornadas em `initUnit` e `returnUnit` em minúsculas, exceto para litro, que deve ser representado como uma maiúscula `'L'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -171,7 +171,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If the unit of measurement is invalid, returned will be `'invalid unit'`.
|
||||
Se a unidade de medida for inválida, será retornado `'invalid unit'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -184,7 +184,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If the number is invalid, returned will be `'invalid number'`.
|
||||
Se o número for inválido, será retornado `'invalid number'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -199,7 +199,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If both the unit and number are invalid, returned will be `'invalid number and unit'`.
|
||||
Se o número e a unidade forem inválidos, será retornado `'invalid number and unit'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -217,7 +217,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can use fractions, decimals or both in the parameter (ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.
|
||||
Você pode usar frações, números decimais ou ambos no parâmetro (por exemplo, 5, 1/2, 2.5/6), mas se nada for fornecido, o padrão será 1.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -248,7 +248,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
Your return will consist of the `initNum`, `initUnit`, `returnNum`, `returnUnit`, and `string` spelling out units in the format `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` with the result rounded to 5 decimals.
|
||||
O retorno consistirá em `initNum`, `initUnit`, `returnNum`, `returnUnit` e `string` escrevendo as unidades no formato `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` com o resultado arredondado para 5 casas decimais.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -265,7 +265,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All 16 unit tests are complete and passing.
|
||||
Todos os 16 testes de unidade foram concluídos e deram aprovação.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -290,7 +290,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All 5 functional tests are complete and passing.
|
||||
Todos os 5 testes funcionais estão completos e passando.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-21
|
||||
|
||||
Suas imagens precisam de espaço entre elas.
|
||||
|
||||
The `gap` CSS shorthand property sets the gaps, also known as gutters, between rows and columns. A propriedade `gap` e suas subpropriedades `row-gap` e `column-gap` fornecem essa funcionalidade para layouts flex, grid e multicolunas. Você aplica a propriedade ao elemento contêiner.
|
||||
A propriedade abreviada `gap` do CSS define as lacunas (gaps), também conhecidas como calhas, entre as linhas e as colunas. A propriedade `gap` e suas subpropriedades `row-gap` e `column-gap` fornecem essa funcionalidade para layouts flex, grid e multicolunas. Você aplica a propriedade ao elemento contêiner.
|
||||
|
||||
Dê ao seu contêiner flex `.gallery` uma propriedade `gap` com o valor `16px`.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
Adicione um elemento `div` ao `body`.
|
||||
|
||||
Defina o atributo `class` como `canvas`. Por exemplo, `<div class="my-div">`.
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
Esse elemento atuará como a tela para sua pintura.
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@ If either argument isn't a valid number, return undefined.
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` should return 53.
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` should return `undefined`.
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -40,6 +40,28 @@ Your app should serve asset files from the `/public` directory to the `/public`
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
Ongeza kipengele cha `div` katika `body`.
|
||||
|
||||
Weka sifa ya `class` sawa na `canvas`. Kwa mfano, `<div class="my-div">`.
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
Hii itafanya kazi kama turubai(canvas) ya mchoro wako.
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@ var sumTwoAnd = addTogether(2);
|
||||
assert.deepEqual(addTogether(2, 3), 5);
|
||||
```
|
||||
|
||||
`addTogether(23, 30)` має повертати 53.
|
||||
`addTogether(23.4, 30)` should return 53.4.
|
||||
|
||||
```js
|
||||
assert.deepEqual(addTogether(23, 30), 53);
|
||||
assert.deepEqual(addTogether(23.4, 30), 53.4);
|
||||
```
|
||||
|
||||
`addTogether("2", 3)` має повертати `undefined`.
|
||||
@@ -94,16 +94,22 @@ addTogether(2,3);
|
||||
|
||||
```js
|
||||
function addTogether() {
|
||||
var a = arguments[0];
|
||||
if (toString.call(a) !== '[object Number]') return;
|
||||
const first = arguments[0];
|
||||
if (typeof(first) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
if (arguments.length === 1) {
|
||||
return function(b) {
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + b;
|
||||
return function(second) {
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
};
|
||||
}
|
||||
var b = arguments[1];
|
||||
if (toString.call(b) !== '[object Number]') return;
|
||||
return a + arguments[1];
|
||||
const second = arguments[1];
|
||||
if (typeof(second) !== 'number') {
|
||||
return undefined;
|
||||
}
|
||||
return first + second;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -22,7 +22,7 @@ GET: прочитати наявний ресурс, не змінюючи йо
|
||||
|
||||
PUT або PATCH (іноді POST): оновити ресурс за допомогою відправлених даних,
|
||||
|
||||
DELETE - Delete a resource.
|
||||
DELETE: видалити ресурс.
|
||||
|
||||
Існують й інші методи, які використовуються для узгодження зв’язку з сервером. За винятком GET, всі інші перераховані вище методи можуть мати корисне навантаження (тобто дані на вміст запиту). Проміжне програмне забезпечення body-parser також працює з цими методами.
|
||||
|
||||
|
||||
@@ -40,6 +40,28 @@ dashedName: serve-static-assets
|
||||
);
|
||||
```
|
||||
|
||||
Your app should not serve files from any other folders except from `/public` directory
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/server.js').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
assert.equal(
|
||||
xhr?.status + '',
|
||||
404 + '',
|
||||
'Your app must serve files only from "public" directory'
|
||||
);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
|
||||
@@ -22,7 +22,7 @@ dashedName: metric-imperial-converter
|
||||
|
||||
Після завершення переконайтеся, що демоверсія проєкту розміщена у відкритому доступі. Потім введіть URL-адресу проєкту в полі «Посилання на розв’язок». За бажанням введіть посилання на початковий код проєкту в полі «Посилання на GitHub».
|
||||
|
||||
**Note:** This project's tests do not work when using `glitch.com`.
|
||||
**Примітка:** тести цього проєкту не працюють при використанні `glitch.com`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
@@ -32,7 +32,7 @@ dashedName: metric-imperial-converter
|
||||
- Щоб провести тести, розкоментуйте `NODE_ENV=test` у своєму файлі `.env`
|
||||
- Щоб запустити тести на консолі, використайте команду `npm run test`. Щоб відкрити консоль Replit, натисніть Ctrl+Shift+P (Cmd на Mac) та введіть «open shell»
|
||||
|
||||
Write the following tests in `tests/1_unit-tests.js`:
|
||||
Напишіть наступні тести в `tests/1_unit-tests.js`:
|
||||
|
||||
- `convertHandler` повинен правильно читати введення цілого числа.
|
||||
- `convertHandler` повинен правильно читати введення десяткового числа.
|
||||
@@ -51,7 +51,7 @@ Write the following tests in `tests/1_unit-tests.js`:
|
||||
- `convertHandler` повинен правильно перетворювати `lbs` у `kg`.
|
||||
- `convertHandler` повинен правильно перетворювати `kg` у `lbs`.
|
||||
|
||||
Write the following tests in `tests/2_functional-tests.js`:
|
||||
Напишіть наступні тести в `tests/2_functional-tests.js`:
|
||||
|
||||
- Перетворення дійсного вводу, наприклад `10L`: запит `GET` до `/api/convert`.
|
||||
- Перетворення недійсного вводу, наприклад `32g`: запит `GET` до `/api/convert`.
|
||||
@@ -61,7 +61,7 @@ Write the following tests in `tests/2_functional-tests.js`:
|
||||
|
||||
# --hints--
|
||||
|
||||
You can provide your own project, not the example URL.
|
||||
Ви можете надати власний проєкт, а не URL-адресу прикладу.
|
||||
|
||||
```js
|
||||
getUserInput => {
|
||||
@@ -73,13 +73,13 @@ getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can `GET` `/api/convert` with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit)
|
||||
Ви можете надіслати запит `GET` до `/api/convert` з параметром, що містить прийняті число та одиницю і отримати їх перетвореними. (Підказка: розділіть вхідні дані, знайшовши індекс першого символу, що позначить початок одиниці)
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
You can convert `'gal'` to `'L'` and vice versa. (1 gal to 3.78541 L)
|
||||
Ви можете перетворити `'gal'` у `'L'` і навпаки. (1 гал = 3.78541 л)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -102,7 +102,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can convert `'lbs'` to `'kg'` and vice versa. (1 lbs to 0.453592 kg)
|
||||
Ви можете перетворити `'lbs'` у `'kg'` і навпаки. (1 фунт = 0.453592 кг)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -125,7 +125,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can convert `'mi'` to `'km'` and vice versa. (1 mi to 1.60934 km)
|
||||
Ви можете перетворити `'mi'` у `'km'` і навпаки. (1 миля = 1.60934 км)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -148,7 +148,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All incoming units should be accepted in both upper and lower case, but should be returned in both the `initUnit` and `returnUnit` in lower case, except for liter, which should be represented as an uppercase `'L'`.
|
||||
Усі вхідні одиниці повинні прийматись в верхньому та нижньому регістрах, однак повинні повертатись в `initUnit` та `returnUnit` в нижньому регістрі; винятком є літри, які повинні бути у верхньому регістрі `'L'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -171,7 +171,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If the unit of measurement is invalid, returned will be `'invalid unit'`.
|
||||
Якщо одиниця виміру недійсна, поверненим буде `'invalid unit'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -184,7 +184,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If the number is invalid, returned will be `'invalid number'`.
|
||||
Якщо число недійсне, поверненим буде `'invalid number'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -199,7 +199,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If both the unit and number are invalid, returned will be `'invalid number and unit'`.
|
||||
Якщо одиниця та число недійсні, поверненим буде `'invalid number and unit'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -217,7 +217,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can use fractions, decimals or both in the parameter (ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.
|
||||
Ви можете використовувати дроби в параметрі (тобто 5, 1/2, 2.5/6), але якщо нічого не вказано, за замовчуванням буде 1.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -248,7 +248,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
Your return will consist of the `initNum`, `initUnit`, `returnNum`, `returnUnit`, and `string` spelling out units in the format `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` with the result rounded to 5 decimals.
|
||||
Повернений об’єкт міститиме `initNum`, `initUnit`, `returnNum`, `returnUnit` та `string`, прописуючи одиниці у форматі `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` із результатом, заокругленим до 5-ти символів після коми.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -265,7 +265,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All 16 unit tests are complete and passing.
|
||||
Усі 16 модульних тестів завершено та успішно пройдено.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@@ -290,7 +290,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All 5 functional tests are complete and passing.
|
||||
Усі 5 функціональних тестів завершено та успішно пройдено.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-6
|
||||
|
||||
Додайте елемент `div` в `body`.
|
||||
|
||||
Встановіть значення атрибута `class` рівне `canvas`. Наприклад, `<div class="my-div">`.
|
||||
Set the `class` attribute equal to `canvas`.
|
||||
|
||||
Це буде полотном вашої картини.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f50e1000cf542c510020
|
||||
title: 'Problem 416: A frog''s trip'
|
||||
title: 'Завдання 416: подорож жабки'
|
||||
challengeType: 1
|
||||
forumTopicId: 302085
|
||||
dashedName: problem-416-a-frogs-trip
|
||||
@@ -8,9 +8,9 @@ dashedName: problem-416-a-frogs-trip
|
||||
|
||||
# --description--
|
||||
|
||||
A row of $n$ squares contains a frog in the leftmost square. By successive jumps the frog goes to the rightmost square and then back to the leftmost square. On the outward trip he jumps one, two or three squares to the right, and on the homeward trip he jumps to the left in a similar manner. He cannot jump outside the squares. He repeats the round-trip travel $m$ times.
|
||||
У ряді з $n$ квадратів, жабка знаходиться в найлівішому. Послідовними стрибками, жабка прямує у найправіший, а потім повертається у найлівіший. Під час своєї подорожі туди та сюди, вона стрибає на 1, 2 або 3 квадрати праворуч, і таким самим чином по дорозі додому назад ліворуч. Жабка не може вистрибнути за межі квадратів. Вона повторює подорож $m$ разів.
|
||||
|
||||
Let $F(m, n)$ be the number of the ways the frog can travel so that at most one square remains unvisited.
|
||||
Нехай $F(m, n)$ буде кількістю шляхів, якими жабка може подорожувати, щоб принаймні один квадрат був невідвіданим.
|
||||
|
||||
Наприклад, $F(1, 3) = 4$, $F(1, 4) = 15$, $F(1, 5) = 46$, $F(2, 3) = 16$ та $F(2, 100)\bmod {10}^9 = 429\\,619\\,151$.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f50d1000cf542c51001f
|
||||
title: 'Problem 417: Reciprocal cycles II'
|
||||
title: 'Завдання 417: зворотні цикли II'
|
||||
challengeType: 1
|
||||
forumTopicId: 302086
|
||||
dashedName: problem-417-reciprocal-cycles-ii
|
||||
@@ -8,7 +8,7 @@ dashedName: problem-417-reciprocal-cycles-ii
|
||||
|
||||
# --description--
|
||||
|
||||
A unit fraction contains 1 in the numerator. The decimal representation of the unit fractions with denominators 2 to 10 are given:
|
||||
Аліквотний дріб містить 1 у чисельнику. Десяткове представлення дробів зі знаменниками від 2 до 10:
|
||||
|
||||
$$\begin{align} & \frac{1}{2} = 0.5 \\\\
|
||||
& \frac{1}{3} = 0.(3) \\\\ & \frac{1}{4} = 0.25 \\\\
|
||||
@@ -17,11 +17,11 @@ $$\begin{align} & \frac{1}{2} = 0.5 \\\\
|
||||
& \frac{1}{9} = 0.(1) \\\\ & \frac{1}{10} = 0.1 \\\\
|
||||
\end{align}$$
|
||||
|
||||
Where $0.1(6)$ means $0.166666\ldots$, and has a 1-digit recurring cycle. It can be seen that $\frac{1}{7}$ has a 6-digit recurring cycle.
|
||||
Де $0.1(6)$ означає $0.166666\ldots$ та має періодичну послідовність з одної цифри. Можна побачити, що $\frac{1}{7}$ має періодичну послідовність із шести.
|
||||
|
||||
Unit fractions whose denominator has no other prime factors than 2 and/or 5 are not considered to have a recurring cycle. We define the length of the recurring cycle of those unit fractions as 0.
|
||||
Вважається, що аліквотні дроби, знаменник яких не має інших простих чисел, окрім 2 та/або 5, не можуть мати періодичну послідовність. Довжину періодичної послідовності таких аліквотних дробів визначають як 0.
|
||||
|
||||
Let $L(n)$ denote the length of the recurring cycle of $\frac{1}{n}$. Дано, що $\sum L(n)$ за умови $3 ≤ n ≤ 1\\,000\\,000$ дорівнює $55\\,535\\,191\\,115$.
|
||||
Нехай $L(n)$ позначає довжину періодичної послідовності $\frac{1}{n}$. Дано, що $\sum L(n)$ за умови $3 ≤ n ≤ 1\\,000\\,000$ дорівнює $55\\,535\\,191\\,115$.
|
||||
|
||||
Знайдіть $\sum L(n)$ за умови $3 ≤ n ≤ 100\\,000\\,000$.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f50f1000cf542c510021
|
||||
title: 'Problem 418: Factorisation triples'
|
||||
title: 'Завдання 418: факторизаційні трійки'
|
||||
challengeType: 1
|
||||
forumTopicId: 302087
|
||||
dashedName: problem-418-factorisation-triples
|
||||
@@ -8,12 +8,12 @@ dashedName: problem-418-factorisation-triples
|
||||
|
||||
# --description--
|
||||
|
||||
Нехай $n$ буде натуральним числом. An integer triple ($a$, $b$, $c$) is called a factorisation triple of $n$ if:
|
||||
Нехай $n$ буде натуральним числом. Трійка цілих чисел ($a$, $b$, $c$) називається факторизаційною трійкою числа $n$, якщо:
|
||||
|
||||
- $1 ≤ a ≤ b ≤ c$
|
||||
- $a \times b \times c = n$.
|
||||
|
||||
Define $f(n)$ to be $a + b + c$ for the factorisation triple ($a$, $b$, $c$) of $n$ which minimises $\frac{c}{a}$. One can show that this triple is unique.
|
||||
Визначте $f(n)$ як $a + b + c$ для факторизаційної трійки ($a$, $b$, $c$) числа $n$, що мінімізує $\frac{c}{a}$. Можна довести, що ця трійка унікальна.
|
||||
|
||||
Наприклад, $f(165) = 19$, $f(100\\,100) = 142$ та $f(20!) = 4\\,034\\,872$.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f5101000cf542c510022
|
||||
title: 'Problem 419: Look and say sequence'
|
||||
title: 'Завдання 419: послідовність «глянь і скажи»'
|
||||
challengeType: 1
|
||||
forumTopicId: 302088
|
||||
dashedName: problem-419-look-and-say-sequence
|
||||
@@ -8,27 +8,27 @@ dashedName: problem-419-look-and-say-sequence
|
||||
|
||||
# --description--
|
||||
|
||||
The look and say sequence goes 1, 11, 21, 1211, 111221, 312211, 13112221, 1113213211, ...
|
||||
Послідовність «глянь і скажи» виглядає так: 1, 11, 21, 1211, 111221, 312211, 13112221, 1113213211, ...
|
||||
|
||||
The sequence starts with 1 and all other members are obtained by describing the previous member in terms of consecutive digits.
|
||||
Послідовність починається з 1, а кожен наступний елемент отримуємо шляхом опису повторюваних цифр попереднього члена.
|
||||
|
||||
It helps to do this out loud:
|
||||
Краще рахувати вголос:
|
||||
|
||||
1 is 'one one' $→ 11$
|
||||
1 — «одна одиниця» $→ 11$
|
||||
|
||||
11 is 'two ones' $→ 21$
|
||||
11 — «дві одиниці» $→ 21$
|
||||
|
||||
21 is 'one two and one one' $→ 1211$
|
||||
21 — «одна двійка та одна одиниця» $→ 1211$
|
||||
|
||||
1211 is 'one one, one two and two ones' $→ 111221$
|
||||
1211 — «одна одиниця, одна двійка та дві одиниці» $→ 111221$
|
||||
|
||||
111221 is 'three ones, two twos and one one' $→ 312211$
|
||||
111221 — «три одиниці, дві двійки та одна одиниця» $→ 312211$
|
||||
|
||||
...
|
||||
|
||||
Define $A(n)$, $B(n)$ and $C(n)$ as the number of ones, twos and threes in the $n$'th element of the sequence respectively. One can verify that $A(40) = 31\\,254$, $B(40) = 20\\,259$ and $C(40) = 11\\,625$.
|
||||
Визначте $A(n)$, $B(n)$ та $C(n)$ як кількість одиниць, двійок та трійок в $n$-ому елементі послідовності. Можна довести, що $A(40) = 31\\,254$, $B(40) = 20\\,259$ та $C(40) = 11\\,625$.
|
||||
|
||||
Знайдіть $A(n)$, $B(n)$ та $C(n)$ за умови $n = {10}^{12}$. Give your answer modulo $2^{30}$ as a string and separate your values for $A$, $B$ and $C$ by a comma. E.g. for $n = 40$ the answer would be `31254,20259,11625`.
|
||||
Знайдіть $A(n)$, $B(n)$ та $C(n)$ за умови $n = {10}^{12}$. Надайте відповідь за модулем $2^{30}$ у вигляді рядка і розділіть значення $A$, $B$ та $C$ комою. Наприклад, для $n = 40$ відповідь така: `31254,20259,11625`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f5111000cf542c510023
|
||||
title: 'Problem 420: 2x2 positive integer matrix'
|
||||
title: 'Завдання 420: натуральна матриця 2x2'
|
||||
challengeType: 1
|
||||
forumTopicId: 302090
|
||||
dashedName: problem-420-2x2-positive-integer-matrix
|
||||
@@ -8,9 +8,9 @@ dashedName: problem-420-2x2-positive-integer-matrix
|
||||
|
||||
# --description--
|
||||
|
||||
A positive integer matrix is a matrix whose elements are all positive integers.
|
||||
Натуральна матриця — це матриця, всі елементи якої є натуральними числами.
|
||||
|
||||
Some positive integer matrices can be expressed as a square of a positive integer matrix in two different ways. Here is an example:
|
||||
Деякі натуральні матриці можуть бути виражені у вигляді квадрата натуральної матриці двома різними способами. Ось приклад:
|
||||
|
||||
$$\begin{pmatrix} 40 & 12 \\\\
|
||||
48 & 40 \end{pmatrix} =
|
||||
@@ -21,9 +21,9 @@ $$\begin{pmatrix} 40 & 12 \\\\
|
||||
6 & 1 \\\\
|
||||
4 & 6 \end{pmatrix}}^2$$
|
||||
|
||||
We define $F(N)$ as the number of the 2x2 positive integer matrices which have a trace less than N and which can be expressed as a square of a positive integer matrix in two different ways.
|
||||
Визначимо $F(N)$ як кількість натуральних матриць 2x2, слід яких менший за N, та які можна виразити як квадрат натуральної матриці двома різними способами.
|
||||
|
||||
We can verify that $F(50) = 7$ and $F(1000) = 1019$.
|
||||
Можна довести, що $F(50) = 7$ та $F(1000) = 1019$.
|
||||
|
||||
Знайдіть $F({10}^7)$.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f5131000cf542c510024
|
||||
title: 'Problem 421: Prime factors of n^15+1'
|
||||
title: 'Завдання 421: прості множники числа n^15+1'
|
||||
challengeType: 1
|
||||
forumTopicId: 302091
|
||||
dashedName: problem-421-prime-factors-of-n151
|
||||
@@ -8,17 +8,17 @@ dashedName: problem-421-prime-factors-of-n151
|
||||
|
||||
# --description--
|
||||
|
||||
Numbers of the form $n^{15} + 1$ are composite for every integer $n > 1$.
|
||||
Числа вигляду $n^{15} + 1$ є складеними для будь-якого цілого значення $n > 1$.
|
||||
|
||||
For positive integers $n$ and $m$ let $s(n, m)$ be defined as the sum of the distinct prime factors of $n^{15} + 1$ not exceeding $m$.
|
||||
Визначимо $s(n, m)$ для натуральних чисел $n$ та $m$ як суму різних простих множників числа $n^{15} + 1$, не перевищуючи $m$.
|
||||
|
||||
E.g. $2^{15} + 1 = 3 × 3 × 11 × 331$.
|
||||
Наприклад, $2^{15} + 1 = 3 × 3 × 11 × 331$.
|
||||
|
||||
So $s(2, 10) = 3$ and $s(2, 1000) = 3 + 11 + 331 = 345$.
|
||||
Отже, $s(2, 10) = 3$ та $s(2, 1000) = 3 + 11 + 331 = 345$.
|
||||
|
||||
Also ${10}^{15} + 1 = 7 × 11 × 13 × 211 × 241 × 2161 × 9091$.
|
||||
Також ${10}^{15} + 1 = 7 × 11 × 13 × 211 × 241 × 2161 × 9091$.
|
||||
|
||||
So $s(10, 100) = 31$ and $s(10, 1000) = 483$.
|
||||
Отже, $s(10, 100) = 31$ та $s(10, 1000) = 483$.
|
||||
|
||||
Знайдіть $\sum s(n, {10}^8)$ за умови $1 ≤ n ≤ {10}^{11}$.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f5131000cf542c510025
|
||||
title: 'Problem 422: Sequence of points on a hyperbola'
|
||||
title: 'Завдання 422: послідовність точок на гіперболі'
|
||||
challengeType: 1
|
||||
forumTopicId: 302092
|
||||
dashedName: problem-422-sequence-of-points-on-a-hyperbola
|
||||
@@ -8,23 +8,23 @@ dashedName: problem-422-sequence-of-points-on-a-hyperbola
|
||||
|
||||
# --description--
|
||||
|
||||
Let $H$ be the hyperbola defined by the equation $12x^2 + 7xy - 12y^2 = 625$.
|
||||
Нехай $H$ буде гіперболою, заданою рівнянням $12x^2 + 7xy - 12y^2 = 625$.
|
||||
|
||||
Next, define $X$ as the point (7, 1). It can be seen that $X$ is in $H$.
|
||||
Визначимо $X$ як точку з координатами (7, 1). Як бачите, $X$ належить $H$.
|
||||
|
||||
Now we define a sequence of points in $H, \\{P_i : i ≥ 1\\}$, as:
|
||||
Тепер визначимо послідовність точок гіперболи $H, \\{P_i : i ≥ 1\\}$ як:
|
||||
|
||||
- $P_1 = (13, \frac{61}{4})$.
|
||||
- $P_2 = (\frac{-43}{6}, -4)$.
|
||||
- For $i > 2$, $P_i$ is the unique point in $H$ that is different from $P_{i - 1}$ and such that line $P_iP_{i - 1}$ is parallel to line $P_{i - 2}X$. It can be shown that $P_i$ is well-defined, and that its coordinates are always rational.
|
||||
- За умови $i > 2$, $P_i$ є унікальною точкою гіперболи $H$, яка відрізняється від $P_{i - 1}$, та за якої пряма $P_iP_{i - 1}$ паралельна прямій $P_{i - 2}X$. Можна довести, що $P_i$ однозначно визначена, а її координати завжди раціональні.
|
||||
|
||||
<img class="img-responsive center-block" alt="animation showing defining points P_1 to P_6" src="https://cdn.freecodecamp.org/curriculum/project-euler/sequence-of-points-on-a-hyperbola.gif" style="background-color: white; padding: 10px;" />
|
||||
<img class="img-responsive center-block" alt="анімація з визначеними точками від P_1 до P_6" src="https://cdn.freecodecamp.org/curriculum/project-euler/sequence-of-points-on-a-hyperbola.gif" style="background-color: white; padding: 10px;" />
|
||||
|
||||
Дано, що $P_3 = (\frac{-19}{2}, \frac{-229}{24})$, $P_4 = (\frac{1267}{144}, \frac{-37}{12})$ та $P_7 = (\frac{17\\,194\\,218\\,091}{143\\,327\\,232}, \frac{274\\,748\\,766\\,781}{1\\,719\\,926\\,784})$.
|
||||
|
||||
Find $P_n$ for $n = {11}^{14}$ in the following format: If $P_n = (\frac{a}{b}, \frac{c}{d})$ where the fractions are in lowest terms and the denominators are positive, then the answer is $(a + b + c + d)\bmod 1\\,000\\,000\\,007$.
|
||||
Знайдіть $P_n$ за умови $n = {11}^{14}$ у такому форматі: якщо $P_n = (\frac{a}{b}, \frac{c}{d})$, де дроби нескоротні, а знаменники додатні, то відповіддю буде $(a + b + c + d)\bmod 1\\,000\\,000\\,007$.
|
||||
|
||||
For $n = 7$, the answer would have been: $806\\,236\\,837$.
|
||||
За умови $n = 7$ відповіддю буде $806\\,236\\,837$.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f5141000cf542c510027
|
||||
title: 'Problem 423: Consecutive die throws'
|
||||
title: 'Завдання 423: послідовні кидки кубика'
|
||||
challengeType: 1
|
||||
forumTopicId: 302093
|
||||
dashedName: problem-423-consecutive-die-throws
|
||||
@@ -10,26 +10,26 @@ dashedName: problem-423-consecutive-die-throws
|
||||
|
||||
Нехай $n$ буде натуральним числом.
|
||||
|
||||
A 6-sided die is thrown $n$ times. Let $c$ be the number of pairs of consecutive throws that give the same value.
|
||||
Шестигранний кубик кидають $n$ разів. Нехай $c$ буде кількістю послідовних кидків, які дають однакове значення.
|
||||
|
||||
For example, if $n = 7$ and the values of the die throws are (1, 1, 5, 6, 6, 6, 3), then the following pairs of consecutive throws give the same value:
|
||||
Наприклад, якщо $n = 7$ і значеннями кидків є (1, 5, 6, 6, 6, 3), то наступні послідовні кидки дають однакове значення:
|
||||
|
||||
$$\begin{align} & (\underline{1}, \underline{1}, 5, 6, 6, 6, 3) \\\\
|
||||
& (1, 1, 5, \underline{6}, \underline{6}, 6, 3) \\\\ & (1, 1, 5, 6, \underline{6}, \underline{6}, 3) \end{align}$$
|
||||
|
||||
Therefore, $c = 3$ for (1, 1, 5, 6, 6, 6, 3).
|
||||
Таким чином, $c = 3$ для (1, 1, 5, 6, 6, 6, 3).
|
||||
|
||||
Define $C(n)$ as the number of outcomes of throwing a 6-sided die $n$ times such that $c$ does not exceed $π(n)$.<sup>1</sup>
|
||||
Визначимо $C(n)$ як кількість результатів кидків шестигранного кубика $n$ разів, щоб $c$ не перевищувало $π(n)$.<sup>1</sup>
|
||||
|
||||
Наприклад, $C(3) = 216$, $C(4) = 1290$, $C(11) = 361\\,912\\,500$ та $C(24) = 4\\,727\\,547\\,363\\,281\\,250\\,000$.
|
||||
|
||||
Define $S(L)$ as $\sum C(n)$ for $1 ≤ n ≤ L$.
|
||||
Визначимо $S(L)$ як $\sum C(n)$ за умови $1 ≤ n ≤ L$.
|
||||
|
||||
Наприклад, $S(50)\bmod 1\\,000\\,000\\,007 = 832\\,833\\,871$.
|
||||
|
||||
Знайдіть $S(50\\,000\\,000)\bmod 1\\,000\\,000\\,007$.
|
||||
|
||||
<sup>1</sup> $π$ denotes the prime-counting function, i.e. $π(n)$ is the number of primes $≤ n$.
|
||||
<sup>1</sup> $π$ позначає функцію підрахунку простих чисел, тобто $π(n)$ є кількістю простих чисел $≤ n$.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f5141000cf542c510026
|
||||
title: 'Problem 424: Kakuro'
|
||||
title: 'Завдання 424: какуро'
|
||||
challengeType: 1
|
||||
forumTopicId: 302094
|
||||
dashedName: problem-424-kakuro
|
||||
@@ -8,33 +8,33 @@ dashedName: problem-424-kakuro
|
||||
|
||||
# --description--
|
||||
|
||||
<img class="img-responsive center-block" alt="kakuro example" src="https://cdn.freecodecamp.org/curriculum/project-euler/kakuro.gif" style="background-color: white; padding: 10px;" />
|
||||
<img class="img-responsive center-block" alt="приклад какуро" src="https://cdn.freecodecamp.org/curriculum/project-euler/kakuro.gif" style="background-color: white; padding: 10px;" />
|
||||
|
||||
The above is an example of a cryptic kakuro (also known as cross sums, or even sums cross) puzzle, with its final solution on the right. (The common rules of kakuro puzzles can be found easily on numerous internet sites. Other related information can also be currently found at krazydad.com whose author has provided the puzzle data for this challenge.)
|
||||
Вище наведено приклад зашифрованого какуро (також відомого як перехресне додавання) з розв’язком праворуч. (Загальні правила какуро легко можна знайти на численних сайтах. Іншу інформацію можна знайти на krazydad.com, автор якого надав дані для цього завдання.)
|
||||
|
||||
The `testPuzzles` array contains the description of 200 such puzzles, a mix of 5x5 and 6x6 types. The first puzzle in the file is the above example which is coded as string as follows:
|
||||
Масив `testPuzzles` містить опис 200 головоломок з полями 5x5 та 6x6. Першим завданням у файлі є наведений вище приклад, що записаний як рядок:
|
||||
|
||||
`6,X,X,(vCC),(vI),X,X,X,(hH),B,O,(vCA),(vJE),X,(hFE,vD),O,O,O,O,(hA),O,I,(hJC,vB),O,O,(hJC),H,O,O,O,X,X,X,(hJE),O,O,X`
|
||||
|
||||
The first character is a numerical digit indicating the size of the information grid. It would be either a 6 (for a 5x5 kakuro puzzle) or a 7 (for a 6x6 puzzle) followed by a comma (,). The extra top line and left column are needed to insert information.
|
||||
Першим символом є цифра, яка вказує розмір поля. Це може бути 6 (для головоломки 5x5) або 7 (для головоломки 6x6), після чого ставлять кому (,). Додаткові верхній рядок та правий стовпець необхідні для збереження інформації.
|
||||
|
||||
The content of each cell is then described and followed by a comma, going left to right and starting with the top line.
|
||||
Потім заповнюється вміст кожної клітинки (розділених комами) зліва направо та починаючи з верхнього рядка.
|
||||
|
||||
`X` = Gray cell, not required to be filled by a digit.
|
||||
`X` = сіра клітинка, не заповнена цифрою.
|
||||
|
||||
`O` (upper case letter)= White empty cell to be filled by a digit.
|
||||
`O` (літера у верхньому регістрі) = біла клітинка, заповнена цифрою.
|
||||
|
||||
`A` = Or any one of the upper case letters from A to J to be replaced by its equivalent digit in the solved puzzle.
|
||||
`A` = або будь-які літери у верхньому регістрі від А до J, що потрібно замінити відповідною цифрою в розв’язаній головоломці.
|
||||
|
||||
`( )` = Location of the encrypted sums. Horizontal sums are preceded by a lower case "h" and vertical sums are preceded by a lower case "v". Those are followed by one or two upper case letters depending if the sum is a single digit or double digit one. For double digit sums, the first letter would be for the "tens" and the second one for the "units". When the cell must contain information for both a horizontal and a vertical sum, the first one is always for the horizontal sum and the two are separated by a comma within the same set of brackets, ex.: (hFE,vD). Each set of brackets is also immediately followed by a comma.
|
||||
`( )` = розташування зашифрованих сум. Перед горизонтальною сумою пишуть «h», а перед вертикальною — «v» (в нижньому регістрі). Після цього записують одну або дві літери у верхньому регістрі, залежно від того, чи сума однозначна чи двозначна. Перша цифра двозначної суми позначає десятки, а друга — одиниці. Якщо клітинка має містити і горизонтальну, і вертикальну суми, то першою завжди пишеться горизонтальна сума, і ці суми розділені комою всередині дужок, наприклад: (hFE,vD). Після кожної пари дужок також ставиться кома.
|
||||
|
||||
The description of the last cell is followed by a Carriage Return/Line Feed (CRLF) instead of a comma.
|
||||
Після опису останньої клітинки пишуть повернення каретки/символ нового рядка (CRLF), а не кому.
|
||||
|
||||
The required answer to each puzzle is based on the value of each letter necessary to arrive at the solution and according to the alphabetical order. As indicated under the example puzzle, its answer would be 8426039571. At least 9 out of the 10 encrypting letters are always part of the problem description. When only 9 are given, the missing one must be assigned the remaining digit.
|
||||
Відповідь до кожної головоломки базується на цифрі кожної літери, необхідної для розв’язку, відповідно до алфавітного порядку. Як показано знизу прикладу, відповідь дорівнює 8426039571. Принаймні 9 з 10 зашифрованих літер завжди є частиною опису головоломки. Якщо дано лише 9 літер, то значенням десятої буде цифра, яка залишилась.
|
||||
|
||||
You are given that the sum of the answers for the first 10 puzzles in `testPuzzles` is 64414157580.
|
||||
Відомо, що сума відповідей перших 10 головоломок в `testPuzzles` дорівнює 64414157580.
|
||||
|
||||
Find the sum of the answers for `puzzles` array.
|
||||
Знайдіть суму відповідей всіх головоломок в масиві `puzzles`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f5151000cf542c510028
|
||||
title: 'Problem 425: Prime connection'
|
||||
title: 'Завдання 425: з’єднання простих чисел'
|
||||
challengeType: 1
|
||||
forumTopicId: 302095
|
||||
dashedName: problem-425-prime-connection
|
||||
@@ -8,20 +8,20 @@ dashedName: problem-425-prime-connection
|
||||
|
||||
# --description--
|
||||
|
||||
Two positive numbers $A$ and $B$ are said to be connected (denoted by "$A ↔ B$") if one of these conditions holds:
|
||||
Два додатних числа $A$ та $B$ вважаються з’єднаними (позначається як $A ↔ B$), якщо виконується одна з цих умов:
|
||||
|
||||
1. $A$ and $B$ have the same length and differ in exactly one digit; for example, $123 ↔ 173$.
|
||||
2. Adding one digit to the left of $A$ (or $B$) makes $B$ (or $A$); for example, $23 ↔ 223$ and $123 ↔ 23$.
|
||||
1. $A$ та $B$ мають однакову довжину і відрізняються тільки однією цифрою. Наприклад, $123 ↔ 173$.
|
||||
2. Додавання однієї цифри зліва від $A$ (або $B$) утворює $B$ (або $A$). Наприклад, $23 ↔ 223$ та $123 ↔ 23$.
|
||||
|
||||
We call a prime $P$ a 2's relative if there exists a chain of connected primes between 2 and $P$ and no prime in the chain exceeds $P$.
|
||||
Просте число $P$ називають родичем 2, якщо між 2 та $P$ існує ланцюжок з’єднаних простих чисел, жодне з яких не перевищує $P$.
|
||||
|
||||
For example, 127 is a 2's relative. One of the possible chains is shown below:
|
||||
Наприклад, 127 є родичем 2. Один з можливих ланцюжків показаний нижче:
|
||||
|
||||
$$2 ↔ 3 ↔ 13 ↔ 113 ↔ 103 ↔ 107 ↔ 127$$
|
||||
|
||||
However, 11 and 103 are not 2's relatives.
|
||||
Однак 11 та 103 не є родичами 2.
|
||||
|
||||
Let $F(N)$ be the sum of the primes $≤ N$ which are not 2's relatives. We can verify that $F({10}^3) = 431$ and $F({10}^4) = 78\\,728$.
|
||||
Нехай $F(N)$ буде сумою простих чисел $≤ N$, які не є родичами 2. Можна довести, що $F({10}^3) = 431$ та $F({10}^4) = 78\\,728$.
|
||||
|
||||
Знайдіть $F({10}^7)$.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5900f51e1000cf542c510030
|
||||
title: 'Problem 432: Totient sum'
|
||||
title: 'Завдання 432: сума функції Ейлера'
|
||||
challengeType: 1
|
||||
forumTopicId: 302103
|
||||
dashedName: problem-432-totient-sum
|
||||
@@ -8,7 +8,7 @@ dashedName: problem-432-totient-sum
|
||||
|
||||
# --description--
|
||||
|
||||
Let $S(n, m) = \sum φ(n × i)$ for $1 ≤ i ≤ m$. ($φ$ is Euler's totient function)
|
||||
Нехай $S(n, m) = \sum φ(n × i)$ за умови $1 ≤ i ≤ m$. ($φ$ є функцією Ейлера)
|
||||
|
||||
Дано, що $S(510\\,510, {10}^6) = 45\\,480\\,596\\,821\\,125\\,120$.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user