mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-25 05:03:48 -05:00
chore(i18n,learn): processed translations (#50885)
This commit is contained in:
camperbot
@@ -7,7 +7,7 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `div.question-block` elements, nest one `label` element, and add a `CSS` related question to the `label` text.
|
||||
Bette innerhalb der `div.question-block`-Elemente ein `label`-Element ein und füge dem `label`-Text eine `CSS`-Frage hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Füge nun die `bottom-line`-Klasse zum zweiten `hr`-Element hinzu, damit die For
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `class` attribute with the value `bottom-line`.
|
||||
Du solltest das `class`-Attribut mit dem Wert `bottom-line` hinzufügen.
|
||||
|
||||
```js
|
||||
assert(code.match(/class=('|")bottom-line\1/i));
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-24
|
||||
|
||||
# --description--
|
||||
|
||||
To make your cabin animation seem more like a natural swinging motion, you can use the `ease-in-out` timing function. Diese Einstellung weist der Animation an, mit langsamerem Tempo zu beginnen und zu enden, aber sich in der Mitte des Zyklus schneller zu bewegen.
|
||||
Du kannst die `ease-in-out`-Timing-Funktion verwenden, um deine Kabinenanimation eher nach einer natürlichen Schwingbewegung aussehen zu lassen. Diese Einstellung weist der Animation an, mit langsamerem Tempo zu beginnen und zu enden, aber sich in der Mitte des Zyklus schneller zu bewegen.
|
||||
|
||||
Replace `linear` to `ease-in-out` in the `.cabin` selector.
|
||||
Ersetze im `.cabin`-Selektor `linear` mit `ease-in-out`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cabin` selector should have an `animation` property set to `cabins 10s ease-in-out infinite`.
|
||||
Dein `.cabin`-Selektor sollte eine `animation`-Eigenschaft auf `cabins 10s ease-in-out infinite` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
|
||||
|
||||
@@ -31,7 +31,7 @@ Du solltest den Dokumententyp als `html` definieren.
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
Du solltest die `DOCTYPE`-Deklaration mit einem `>` nach dem Typ schließen.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
@@ -49,7 +49,7 @@ Dein `html`-Element sollte ein schließendes Tag haben.
|
||||
assert(code.match(/<\/html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `DOCTYPE` declaration should be at the beginning of your HTML.
|
||||
Deine `DOCTYPE`-Deklaration sollte am Anfang deines HTMLs stehen.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-8
|
||||
|
||||
# --description--
|
||||
|
||||
Now that your external CSS file is set up, you can start styling the page.
|
||||
Da nun deine externe CSS-Datei eingerichtet ist, kannst du mit der Gestaltung der Seite beginnen.
|
||||
|
||||
As a reminder, here's how to target a paragraph element and align it to the right:
|
||||
Hier zur Erinnerung, wie man ein Absatz-Element auswählt und es nach rechts ausrichtet:
|
||||
|
||||
```css
|
||||
p {
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-13
|
||||
|
||||
Deine Markierung würde besser aussehen, wenn sie auf der Seite zentriert wäre. Eine einfache Möglichkeit, dies zu zun, ist die `margin` <dfn>shorthand property</dfn> zu verwenden.
|
||||
|
||||
In the last project, you set the margin area of elements separately with properties like `margin-top` and `margin-left`. The `margin` shorthand property makes it easy to set multiple margin areas at the same time.
|
||||
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`.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
A function is a piece of code that can take an input and perform a specific action. Die `rgb`-CSS-Funktion nimmt Werte oder <dfn>arguments</dfn> für Rot, Grün und Blau an und erzeugt eine Farbe:
|
||||
Eine Funktion ist ein Teil des Codes, der eine Eingabe entgegennehmen und eine bestimmte Aktion ausführen kann. Die `rgb`-CSS-Funktion nimmt Werte oder <dfn>arguments</dfn> für Rot, Grün und Blau an und erzeugt eine Farbe:
|
||||
|
||||
```css
|
||||
rgb(red, green, blue);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-32
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. Das liegt daran, dass Orange die Kombination aus Rot und Gelb ist und zwischen den beiden Farben des Farbkreies fällt.
|
||||
Beachte, dass du die Intensität von Rot erhöhen musst und die Intensität der grünen `rgb`-Werte senken musst, um Orange zu erstellen. Das liegt daran, dass Orange die Kombination aus Rot und Gelb ist und zwischen den beiden Farben des Farbkreies fällt.
|
||||
|
||||
Kombiniere Cyan mit Grün, um die Tertiärfarbe Frühlingsgrün herzustellen. Aktualisiere die `rgb`-Funktion in der `.two`-CSS-Regel so, dass Grün den maximalen Wert hat und Blau auf `127` eingestellt ist.
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Fällt dir auf, wie deine Augen ganz natürlich von der roten Farbe in der Mitte
|
||||
|
||||
Es gibt mehrere andere wichtige Farbkombinationen außerhalb der Komplementärfarben, du wirst diese später lernen.
|
||||
|
||||
For now, use the `rgb` function in the `.two` CSS rule to set the `background-color` to black.
|
||||
Verwende vorerst die `rgb`-Funktion in der `.two`-CSS-Regel, um die `background-color` auf schwarz zu setzen.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,15 +7,15 @@ dashedName: step-48
|
||||
|
||||
# --description--
|
||||
|
||||
The <dfn>HSL</dfn> color model, or hue, saturation, and lightness, is another way to represent colors.
|
||||
Das <dfn>HSL</dfn>-Farbmodell, oder Farbton, Sättigung und Helligkeit, ist ein weiterer Weg Farben darzustellen.
|
||||
|
||||
Die hsl-CSS-Funktion nimmt 3 Werte auf: Eine Zahl von 0 bis 360 für einen Farbton, einen Prozentsatz von 0 bis 100 für die Sättigung und einen Prozentsatz von 0 bis 100 für Helligkeit.
|
||||
|
||||
Wenn du dir einen Farbkreis vorstellst ist der Farbton Rot auf 0 Grad, Grün auf 120 Grad und Blau auf 240 Grad.
|
||||
|
||||
Sättigung ist die Intensität einer Farbe von 0%, grau, bis zu 100% für die reine Farbe. You must add the percent sign `%` to the saturation and lightness values.
|
||||
Sättigung ist die Intensität einer Farbe von 0%, grau, bis zu 100% für die reine Farbe. Du musst das Prozentzeichen `%` zu den Sättigungs- und Helligkeitswerten hinzufügen.
|
||||
|
||||
Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral.
|
||||
Die Helligkeit gibt an, wie hell eine Farbe erscheint. Sie reicht von 0 %, also komplett schwarz, bis 100 %, also komplett weiß, wobei 50 % neutral ist.
|
||||
|
||||
Verwende in der `.blue`-CSS-Regel die `hsl`-Funktion, um die `background-color`-Eigenschaft auf reines Blau zu ändern. Setze den Farbton auf `240`, die Sättigung auf `100%` und die Helligkeit auf `50%`.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-68
|
||||
|
||||
# --description--
|
||||
|
||||
As the second color argument, pass in the `hsl` function with the values `223` for hue, `90%` for saturation, and `60%` for lightness.
|
||||
Übergib als zweites Farbargument die `hsl`-Funktion mit den Werten `223` für Farbton, `90%` für Sättigung und `60%` für Helligkeit.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-76
|
||||
|
||||
Dein Ärmel sieht gut aus, aber er würde noch besser aussehen, wenn er mehr auf der rechten Seite der Markierung positioniert wäre. Eine Möglichkeit, dies zu tun, besteht darin, vor dem Ärmel ein weiteres Element hinzuzufügen, um es nach rechts zu schieben.
|
||||
|
||||
Add a new `div` with the class `cap` before the sleeve `div` element.
|
||||
Füge einen neuen `div` mit der Klasse `cap` vor dem `div`-Ärmel-Element hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ const greenMarkerChildren = [...document.querySelector('.green')?.children];
|
||||
assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2);
|
||||
```
|
||||
|
||||
Your green marker's cap `div` element should be before the sleeve `div` element.
|
||||
Das `div`-Mützen-Element deiner grünen Markierung sollte vor dem `div`-Ärmel-Element stehen.
|
||||
|
||||
```js
|
||||
const greenMarkerChildren = [...document.querySelector('.green')?.children];
|
||||
@@ -29,14 +29,14 @@ const greenMarkerSleeve = document.querySelector('.green .sleeve');
|
||||
assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve));
|
||||
```
|
||||
|
||||
Your blue marker `div` should contain two `div` elements.
|
||||
Deine blaue Markierung `div` sollte zwei `div`-Elemente enthalten.
|
||||
|
||||
```js
|
||||
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
|
||||
assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2);
|
||||
```
|
||||
|
||||
Your blue marker's cap `div` element should be before the sleeve `div` element.
|
||||
Das `div`-Mützen-Element deiner blauen Markierung sollte vor dem `div`-Ärmel-Element stehen.
|
||||
|
||||
```js
|
||||
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
|
||||
|
||||
@@ -13,7 +13,7 @@ Setze die `display`-Eigenschaft des `.heading`-Selektors auf `grid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.heading` selector should have a `display` property set to `grid`.
|
||||
Dein `.heading`-Selektor sollte eine `display`-Eigenschaft auf `grid` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.heading')?.display === 'grid');
|
||||
|
||||
@@ -13,7 +13,7 @@ Glückwunsch! Dein Magazin ist nun fertig.
|
||||
|
||||
# --hints--
|
||||
|
||||
Du solltest für `only screen and (max-width: 420px)` eine neue `@media`-Query haben. Dies sollte die letzte Query in der `@media`-Query-Liste sein.
|
||||
Du solltest für `only screen and (max-width: 420px)` eine neue `@media` Query haben. Dies sollte die letzte Query in der `@media`-Query-Liste sein.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-2
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
|
||||
Wähle das `body`-Element aus, um den `background` auf einen linearen Farbverlauf mit 45 Grad im Uhrzeigersinn festzulegen, beginnend bei `rgb(118, 201, 255)` und endend bei `rgb(247, 255, 222)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
Remove both the horizontal and vertical scrollbars, using only one property.
|
||||
Entferne sowohl die horizontalen als auch die vertikalen Scrollbalken, indem du nur eine Eigenschaft verwendest.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ Du solltest `.chin` eine `top`-Eigenschaft geben.
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
|
||||
```
|
||||
|
||||
You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
Du solltest `.chin` eine `top` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
|
||||
@@ -29,7 +29,7 @@ Du solltest `.chin` eine `left`-Eigenschaft geben.
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
|
||||
```
|
||||
|
||||
You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
Du solltest `.chin` eine `left` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
|
||||
|
||||
@@ -25,7 +25,7 @@ Du solltest `:root` eine `--penguin-face`-Eigenschaft geben.
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
|
||||
```
|
||||
|
||||
You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
Du solltest `:root` ein `--penguin-face` von `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-59
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
|
||||
Wähle das `.eye`-Element mit der `left`-Klasse aus und positioniere es `25%` links von seinem übergeordneten Element. Wähle dann das `.eye`-Element mit der `right`-Klasse aus und positioniere es `25%` rechts von seinem übergeordneten Element.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ Du solltest `:root` eine `--penguin-skin`-Eigenschaft geben.
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
|
||||
```
|
||||
|
||||
You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
|
||||
Du solltest `--penguin-skin` einen Wert von `gray` zuweisen, aber es wurde `--fcc-actual--` gefunden.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
|
||||
@@ -29,7 +29,7 @@ Du solltest `.penguin-head` einen `background` von `linear-gradient(45deg, var(-
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
|
||||
```
|
||||
|
||||
You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
|
||||
Du solltest `.penguin-body::before` eine `background-color` von `var(--penguin-skin)` zuweisen, aber es wurde `--fcc-actual--` gefunden.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-101
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions.
|
||||
Wähle das `.penguin`-Element aus, wenn es aktiv ist, und erhöhe seine Größe in beiden Dimensionen um `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-103
|
||||
|
||||
# --description--
|
||||
|
||||
Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`.
|
||||
Ändere das `transition`-Verhalten des `.penguin`-Elements während der Transformation, damit es eine Dauer von `1s`, eine Timing-Funktion von `ease-in-out` und eine Verzögerung von `0ms` hat.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-68
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle eine neue Variable namens `--window-color4` in `:root` und gib ihr einen Wert von `#8cb3d9`. This will be the secondary color for the last background building.
|
||||
Erstelle eine neue Variable namens `--window-color4` in `:root` und gib ihr einen Wert von `#8cb3d9`. Dies wird die Sekundärfarbe für das letzte Hintergrundelement sein.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-79
|
||||
|
||||
# --description--
|
||||
|
||||
You're going to use some more border tricks for the top section. Füge `border-bottom` mit einem Wert von `7vh solid var(--building-color4)` zu `.fb1a` hinzu. Dadurch wird unten ein Rand mit einer Höhe von `7vh` angezeigt. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
|
||||
Du wirst einige weitere Kanten-Tricks für den oberen Abschnitt verwenden. Füge `border-bottom` mit einem Wert von `7vh solid var(--building-color4)` zu `.fb1a` hinzu. Dadurch wird unten ein Rand mit einer Höhe von `7vh` angezeigt. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-92
|
||||
|
||||
# --description--
|
||||
|
||||
Nest three new `div` elements in the first `.fb3a` element. 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. Give them each a class of `fb3-window`. Dies werden Fenster für diesen Abschnitt sein.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-6
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous step, you put the `h1`, `h2`, comment, and `p` elements inside the `main` element. Dies nennt man *nesting*. Verschachtelte Elemente sollten zwei Leerzeichen weiter rechts von dem Element, in dem sie verschachtelt sind, platziert werden. Diesen Abstand nennt man Einrückung und wird verwendet, um HTML leichter lesen zu können.
|
||||
Im vorherigen Schritt hast du die `h1`-, `h2`-, Kommentar- und `p`-Elemente in das `main`-Element hinzugefügt. Dies nennt man *nesting*. Verschachtelte Elemente sollten zwei Leerzeichen weiter rechts von dem Element, in dem sie verschachtelt sind, platziert werden. Diesen Abstand nennt man Einrückung und wird verwendet, um HTML leichter lesen zu können.
|
||||
|
||||
Das `h1`-Element, `h2`-Element und der Kommentar sind um zwei Leerzeichen mehr eingerückt als das `main`-Element im folgenden Code. Verwende die Leertaste auf deiner Tastatur, um zwei weitere Leerzeichen vor dem `p`-Element hinzuzufügen, so dass es auch richtig eingerückt wird.
|
||||
|
||||
@@ -23,7 +23,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should not add the `ul` or `li` elements from the example.
|
||||
Du solltest nicht die `ul`- oder `li`-Elemente aus dem Beispiel hinzufügen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -34,13 +34,13 @@ const collection = [...document.querySelectorAll('a, p')].map(
|
||||
assert(collection.indexOf('P') < collection.indexOf('A'));
|
||||
```
|
||||
|
||||
Dein (`a`)-Element hat kein `href`-Attribut. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
Dein (`a`)-Element hat kein `href`-Attribut. Überprüfe, ob nach dem Namen des öffnenden Tags ein Leerzeichen steht und/oder ob vor allen Attributnamen Leerzeichen stehen.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a').hasAttribute('href'));
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. Du hast entweder die URL weggelassen oder einen Tippfehler gemacht.
|
||||
Dein (`a`)-Ankerelement sollte auf `https://freecatphotoapp.com` verlinken. Du hast entweder die URL weggelassen oder einen Tippfehler gemacht.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-19
|
||||
|
||||
Wenn du ein untergeordnetes Überschriftenelement zur Seite hinzufügst, wird angedeutet, dass du einen neuen Unterabschnitt beginnst.
|
||||
|
||||
After the last `h2` element of the second `section` element, add an `h3` element with this text:
|
||||
Füge nach dem letzten `h2`-Element des zweiten `section`-Elements ein `h3`-Element mit diesem Text hinzu:
|
||||
|
||||
`Things cats love:`
|
||||
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-37
|
||||
|
||||
# --description--
|
||||
|
||||
The `input` element allows you several ways to collect data from a web form. Like `img` elements, `input` elements are <dfn>self-closing</dfn> and do not need closing tags.
|
||||
Das `input`-Element gibt dir mehrere Möglichkeiten, Daten aus einem Webformular zu sammeln. Like `img` elements, `input` elements are <dfn>self-closing</dfn> and do not need closing tags.
|
||||
|
||||
Nest an `input` element in the `form` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order.
|
||||
Your `form` element should have an opening tag and closing tag in the correct order. Es kann sein, dass eine oder beide der erforderlichen Tags fehlen oder in der falschen Reihenfolge sind.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
@@ -48,7 +48,7 @@ Dein `input`-Element sollte innerhalb deines `form`-Elements eingebettet sein.
|
||||
assert(document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
Deine `form` sollte nur das `input`-Element enthalten. Remove any HTML elements or text between the `form` element's tags.
|
||||
Deine `form` sollte nur das `input`-Element enthalten. Entferne jedes HTML-Element oder jeglichen Text zwischen den Tags des `form`-Elements.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `button` element to create a clickable button. Zum Beispiel erstellt `<button>Click Here</button>` eine Schaltfläche mit dem Text `Click Here`.
|
||||
Benutze das `button`-Element, um eine anklickbare Schaltfläche zu erstellen. Zum Beispiel erstellt `<button>Click Here</button>` eine Schaltfläche mit dem Text `Click Here`.
|
||||
|
||||
Add a `button` element with the text `Submit` below the `input` element. The default behavior of clicking a form button without any attributes submits the form to the location specified in the form's `action` attribute.
|
||||
Füge ein `button`-Element mit dem Text `Submit` unter dem `input`-Element hinzu. The default behavior of clicking a form button without any attributes submits the form to the location specified in the form's `action` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Du kannst Optionsschaltflächen für Fragen verwenden, bei denen du nur eine Ant
|
||||
|
||||
Hier ist ein Beispiel für ein Radio-Button mit der Option von `cat`: `<input type="radio"> cat`. Beachte, dass `input`-Elemente <dfn>self-closing</dfn> sind.
|
||||
|
||||
Before the text input, add a radio button with the option set as:
|
||||
Füge vor der Texteingabe einen Radio-Button hinzu, der diese Option enthält:
|
||||
|
||||
`Indoor`
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-50
|
||||
|
||||
Das `fieldset`-Element wird verwendet, um zugehörige Eingaben und Kennzeichnungen in einem Webformular zusammenzufassen. `fieldset`-Elemente sind <dfn>block-level elements</dfn>, sie werden also in einer neuen Zeile angezeigt.
|
||||
|
||||
Nest the `Indoor` and `Outdoor` radio buttons within a `fieldset` element, and don't forget to indent the radio buttons.
|
||||
Bette die `Indoor`- und `Outdoor`-Radio-Buttons innerhalb eines `fieldset`-Elements ein und vergiss nicht die Radio-Buttons einzurücken.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-29
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `figure` element you just added, nest an `img` element with a `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`.
|
||||
Bette innerhalb des `figure`-Elements, das du eben hinzugefügt hast, ein `img`-Element mit einem `src`-Attribut ein, das auf `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg` gesetzt ist.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -29,7 +29,7 @@ Es sollte ein zweites `figure`-Element genau über dem zweiten schließenden Tag
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
```
|
||||
|
||||
You should have a third `img` element nested in the `figure` element.
|
||||
Du solltest ein drittes `img`-Element in dem `figure`-Element einbetten.
|
||||
|
||||
```js
|
||||
const catsImg = document.querySelectorAll('figure > img')[1];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-56
|
||||
|
||||
# --description--
|
||||
|
||||
There's another way to associate an `input` element's text with the element itself. Du kannst den Text innerhalb eines `label`-Elements verschachteln und ein `for`-Attribut mit dem gleichen Wert wie das `id`-Attribut des `input`-Elements hinzufügen.
|
||||
Es gibt eine andere Möglichkeit, den Text eines `input`-Elements mit dem Element selbst zu verknüpfen. Du kannst den Text innerhalb eines `label`-Elements verschachteln und ein `for`-Attribut mit dem gleichen Wert wie das `id`-Attribut des `input`-Elements hinzufügen.
|
||||
|
||||
Verknüpfe den Text `Loving` mit der Checkbox, indem du nur den Text `Loving` in einem `label`-Element verschachtelst und ihm ein entsprechendes `for`-Attribut gibst.
|
||||
|
||||
|
||||
@@ -9,17 +9,17 @@ dashedName: step-39
|
||||
|
||||
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">`.
|
||||
|
||||
Add the `name` attribute with the value `catphotourl` to your text field.
|
||||
Füge das `name`-Attribut mit dem Wert `catphotourl` zu deinem Textfeld hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You have either deleted your `input` element or it has invalid 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. All attributes' values should be surrounded by quotation marks.
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
```
|
||||
|
||||
Your `form` should only contain the `input` element. Remove any additional HTML elements or text within the `form` element.
|
||||
Deine `form` sollte nur das `input`-Element enthalten. Entferne innerhalb des `form`-Elements alle zusätzlichen HTML-Elemente oder Text.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -28,13 +28,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
Dein `input`-Element hat kein `name`-Attribut. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
|
||||
```js
|
||||
assert($('input')[0].hasAttribute('name'));
|
||||
```
|
||||
|
||||
Your `input` element should have a `name` attribute with the value `catphotourl`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.
|
||||
Dein `input`-Element sollte ein `name`-Attribut mit dem Wert `catphotourl` enthalten. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -44,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Although you have set the `input` element's `name` attribute to `catphotourl`, it is recommended to always surround the value of an attribute with quotation marks.
|
||||
Obwohl du das `name`-Attribut des `input`-Elements auf `catphotourl` gesetzt hast, wird es empfohlen, die Werte eines Attributs immer zwischen Anführungszeichen zu schreiben.
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
|
||||
|
||||
@@ -7,31 +7,31 @@ dashedName: step-4
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `title` and a `meta` element to the `head`. Give your project a title of `Registration Form`, and give a `charset` attribute with a value of `UTF-8` to your `meta` element.
|
||||
Füge ein `title`- und ein `meta`-Element zum `head` hinzu. Weise deinem Projekt den Titel `Registration Form` zu und füge deinem `meta`-Element ein `charset`-Attribut mit dem Wert `UTF-8` hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `title` element.
|
||||
Dein Code sollte ein `title`-Element enthalten.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
The `title` element should be within the `head` element.
|
||||
Das `title`-Element sollte sich innerhalb des `head`-Elements befinden.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > title'));
|
||||
```
|
||||
|
||||
Your project should have a title of `Registration Form`.
|
||||
Dein Projekt sollte den Titel `Registration Form` haben.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text.toLowerCase(), 'registration form')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matters for the title.
|
||||
Denke daran, dass Schreibweise und Rechtschreibung für den Titel wichtig sind.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
|
||||
@@ -11,7 +11,7 @@ Now, get rid of the horizontal scroll-bar, by setting the `body` default `margin
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add `margin` within the `body` element selector.
|
||||
Du solltest `margin` innerhalb des `body`-Elementselektors hinzufügen.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin);
|
||||
|
||||
@@ -6,13 +6,13 @@ dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
The `rem` unit stands for root `em`, and is relative to the font size of the `html` element.
|
||||
Die `rem`-Einheit steht für root `em` und ist relativ zur Schriftgröße des `html`-Elements.
|
||||
|
||||
As `label` elements are inline by default, they are all displayed side by side on the same line, making their text hard to read. To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other.
|
||||
Da `label`-Elemente standardmäßig inline sind, werden sie in derselben Zeile nebeneinander angezeigt, was ihren Text schwer lesbar macht. Um sie in separaten Zeilen erscheinen zu lassen, füge `display: block` zum `label`-Element und eine `margin` von `0.5rem 0` hinzu, um sie voneinander zu trennen.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `label` selector.
|
||||
Du solltest den `label`-Selektor verwenden.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('label'));
|
||||
|
||||
@@ -9,25 +9,25 @@ dashedName: step-19
|
||||
|
||||
Specifying the `type` attribute of a form element is important for the browser to know what kind of data it should expect. If the `type` is not specified, the browser will default to `text`.
|
||||
|
||||
Give the first two `input` elements a `type` attribute of `text`, the third a `type` attribute of `email`, and the fourth a `type` attribute of `password`.
|
||||
Weise den ersten zwei `input`-Elementen ein `type`-Attribut von `text`, dem dritten ein `type`-Attribut von `email` und dem vierten ein `type`-Attribut von `password` zu.
|
||||
|
||||
The `email` type only allows emails with a `@` and a `.` in the domain. The `password` type obscures the input, and warns if the site does not use HTTPS.
|
||||
The `email` type only allows emails with a `@` and a `.` in the domain. Der `password`-Typ verdeckt die Eingabe und warnt, wenn die Seite kein HTTPS verwendet.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `input` element a `type` attribute of `text`.
|
||||
Du solltest dem ersten `input`-Element ein `type`-Attribut von `text` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input')?.type, 'text');
|
||||
```
|
||||
|
||||
You should give the second `input` element a `type` attribute of `text`.
|
||||
Du solltest dem zweiten `input`-Element ein `type`-Attribut von `text` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text');
|
||||
```
|
||||
|
||||
You should give the third `input` element a `type` attribute of `email`.
|
||||
Du solltest dem dritten `input`-Element ein `type`-Attribut von `email` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email');
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-24
|
||||
|
||||
# --description--
|
||||
|
||||
Let us go to the next part of the registration form. This section will ask for the type of account the user is opening, and will confirm the user has read the terms and conditions.
|
||||
Kommen wir nun zum nächsten Teil des Anmeldeformulars. In diesem Abschnitt wird nach der Art des Kontos gefragt, das der Nutzer eröffnet, und es wird bestätigt, dass der Nutzer die Allgemeinen Geschäftsbedingungen gelesen hat.
|
||||
|
||||
Start by adding three `label` elements to the second `fieldset`.
|
||||
Beginne, indem du drei `label`-Elemente zum zweiten `fieldset` hinzufügst.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add three `label` elements to the second `fieldset`.
|
||||
Du solltest drei `label`-Elemente zum zweiten `fieldset` hinzufügen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3);
|
||||
|
||||
@@ -7,26 +7,26 @@ dashedName: step-25
|
||||
|
||||
# --description--
|
||||
|
||||
Users will be allowed to choose either a `Personal Account` or `Business Account`.
|
||||
Benutzer haben die Möglichkeit, zwischen einem `Personal Account` oder `Business Account` zu wählen.
|
||||
|
||||
To do this, within each of the first two `label` elements, add one `input` element with `type="radio"`.
|
||||
Um dies zu tun, füge innerhalb jedes der beiden ersten `label`-Element ein `input`-Element mit `type="radio"` hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `input` elements.
|
||||
Du solltest zwei `input`-Elemente hinzufügen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2);
|
||||
```
|
||||
|
||||
You should add one `input` to each of the first two `label` elements.
|
||||
Du solltest zu jedem der ersten zwei `label`-Elemente ein `input` hinzufügen.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input'));
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input'));
|
||||
```
|
||||
|
||||
You should give both `input` elements a `type` of `radio`.
|
||||
Du solltest beiden `input`-Elementen einen `type` von `radio` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-35
|
||||
|
||||
# --description--
|
||||
|
||||
The dropdown options are currently empty. To give them content, add the following text to each subsequent `option` element:
|
||||
Die Dropdown-Optionen sind derzeit leer. Füge den folgenden Text zu jedem nachfolgenden `option`-Element hinzu, um ihnen Inhalt zuzuweisen:
|
||||
|
||||
```md
|
||||
(select one)
|
||||
@@ -19,31 +19,31 @@ Other
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `option` element the text `(select one)`.
|
||||
Du solltest dem ersten `option`-Element den Text `(select one)` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)');
|
||||
```
|
||||
|
||||
You should give the second `option` element the text `freeCodeCamp News`.
|
||||
Du solltest dem zweiten `option`-Element den Text `freeCodeCamp News` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News');
|
||||
```
|
||||
|
||||
You should give the third `option` element the text `freeCodeCamp YouTube Channel`.
|
||||
Du solltest dem dritten `option`-Element den Text `freeCodeCamp YouTube Channel` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel');
|
||||
```
|
||||
|
||||
You should give the fourth `option` element the text `freeCodeCamp Forum`.
|
||||
Du solltest dem vierten `option`-Element den Text `freeCodeCamp Forum` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum');
|
||||
```
|
||||
|
||||
You should give the fifth `option` element the text `Other`.
|
||||
Du solltest dem fünften `option`-Element den Text `Other` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other');
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
During development, it is useful to see the `fieldset` default borders. However, they make the content appear too separated.
|
||||
During development, it is useful to see the `fieldset` default borders. Sie lassen jedoch den Inhalt zu weit voneinander getrennt erscheinen.
|
||||
|
||||
Remove the `border`, and add `2rem` of padding only to the top and bottom of each `fieldset`. Be sure to remove the `padding` from the left and right.
|
||||
Remove the `border`, and add `2rem` of padding only to the top and bottom of each `fieldset`. Achte darauf, das `padding` von links und rechts zu entfernen.
|
||||
|
||||
# --hints--
|
||||
|
||||
You can use either a value of `none` or `0` to remove the `border`.
|
||||
Du kannst entweder einen Wert von `none` oder `0` verwenden, um die `border` zu entfernen.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/);
|
||||
@@ -27,7 +27,7 @@ assert.equal(fieldset?.paddingTop, '2rem');
|
||||
assert.equal(fieldset?.paddingBottom, '2rem');
|
||||
```
|
||||
|
||||
You should remove the `padding` from the left and right of each `fieldset`.
|
||||
Du solltest das `padding` links und rechts von jedem `fieldset` entfernen.
|
||||
|
||||
```js
|
||||
const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
|
||||
|
||||
@@ -7,31 +7,31 @@ dashedName: step-56
|
||||
|
||||
# --description--
|
||||
|
||||
To style the submit button, you can use an _attribute_ selector, which selects an element based on the given attribute value. Hier ist ein Beispiel:
|
||||
Um den Bestätigungsbutton zu gestalten, kannst du einen _attribute_-Selektor verwenden, der ein Element basierend auf dem angegebenen Attributwert auswählt. Hier ist ein Beispiel:
|
||||
|
||||
```css
|
||||
input[name="password"]
|
||||
```
|
||||
|
||||
The above selects `input` elements with a `name` attribute value of `password`.
|
||||
Das obere wählt `input`-Elemente mit einem `name`-Attributwert von `password` aus.
|
||||
|
||||
Now, use the attribute selector to style the submit button with a `display` of `block`, and a `width` of `60%`.
|
||||
Verwende jetzt den Attribut-Selektor, um den Bestätigungsbutton mit einem `display` von `block` und einer `width` von `60%` zu gestalten.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an attribute selector of `input[type="submit"]` to style the submit button.
|
||||
Du solltest einen Attribut-Selektor von `input[type="submit"]` verwenden, um den Bestätigungsbutton zu gestalten.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]'));
|
||||
```
|
||||
|
||||
You should give the submit button a `display` of `block`.
|
||||
Du solltest dem Bestätigungsbutton einen `display` von `block` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block');
|
||||
```
|
||||
|
||||
You should give the submit button a `width` of `60%`.
|
||||
Du solltest dem Bestätigungsbutton eine `width` von `60%` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%');
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-58
|
||||
|
||||
# --description--
|
||||
|
||||
To make the submit button look more in line with the rest of the form, give it the same `height` as the other fields (`2em`). Also, increase the `font-size` to `1.1rem`.
|
||||
Damit der Bestätigungsbutton besser zum Rest des Formulars passt, weise ihm die gleiche `height` wie den anderen Feldern (`2em`) zu. Vergrößere auch die `font-size` auf `1.1rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the submit button a `height` of `2em`.
|
||||
Du solltest dem Bestätigungsbutton eine `height` von `2em` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em');
|
||||
```
|
||||
|
||||
You should give the submit button a `font-size` of `1.1rem`.
|
||||
Du solltest dem Bestätigungsbutton eine `font-size` von `1.1rem` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem');
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-59
|
||||
|
||||
# --description--
|
||||
|
||||
To make the submit button appear more distinct, give it a `background-color` of `#3b3b4f`, and a `border-color` of `white`.
|
||||
Um den Bestätigungsbutton deutlicher erscheinen zu lassen, weise ihm eine `background-color` von `#3b3b4f` und eine `border-color` von `white` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the submit button a `background-color` of `#3b3b4f`.
|
||||
Du solltest dem Bestätigungsbutton eine `background-color` von `#3b3b4f` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
You should give the submit button a `border-color` of `white`.
|
||||
Du solltest dem Bestätigungsbutton eine `border-color` von `white` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-14
|
||||
|
||||
# --description--
|
||||
|
||||
This character needs eyes. Create two `div` elements in the `#black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order.
|
||||
This character needs eyes. Erstelle zwei `div`-Elemente im `#black-mask`-Element. Give them the classes `eyes left` and `eyes right`, in that order.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-16
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, create a rule for the element with the id `offwhite-character`. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`.
|
||||
Erstelle mit einem ID-Selektor eine Regel für das Element mit der ID `offwhite-character`. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
The mask needs eyes. Within your `#gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`.
|
||||
The mask needs eyes. Füge innerhalb deines `#gray-mask`-Elements zwei `div`-Elemente hinzu. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,19 +11,19 @@ Give the `#white-paper` a `position` of `absolute`, a `top` of `250px`, and a `l
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#white-paper` selector should have a `position` property set to `absolute`.
|
||||
Dein `#white-paper`-Selektor sollte eine `position`-Eigenschaft mit dem Wert `absolute` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#white-paper` selector should have a `top` property set to `250px`.
|
||||
Dein `#white-paper`-Selektor sollte eine `top`-Eigenschaft von `250px` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px');
|
||||
```
|
||||
|
||||
Your `#white-paper` selector should have a `left` property set to `-150px`.
|
||||
Dein `#white-paper`-Selektor sollte eine `left`-Eigenschaft von `-150px` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px');
|
||||
|
||||
@@ -7,23 +7,23 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
Select the element with the id `blue-left` using an id selector. Give it a `width` of `500px` and a `height` of `300px`.
|
||||
Select the element with the id `blue-left` using an id selector. Weise ihm eine `width` von `500px` und eine `height` von `300px` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#blue-left` selector.
|
||||
Du solltest einen `#blue-left`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left'));
|
||||
```
|
||||
|
||||
Your `#blue-left` selector should have a `width` property set to `500px`.
|
||||
Dein `#blue-left`-Selektor sollte eine `width`-Eigenschaft auf `500px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px');
|
||||
```
|
||||
|
||||
Your `#blue-left` selector should have a `height` property set to `300px`.
|
||||
Dein `#blue-left`-Selektor sollte eine `height`-Eigenschaft auf `300px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px');
|
||||
|
||||
@@ -7,24 +7,24 @@ dashedName: step-58
|
||||
|
||||
# --description--
|
||||
|
||||
The `#eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`.
|
||||
Das `#eyes-div`-Element sollte ein paar Augen enthalten. Füge zwei `div`-Elemente im Inneren hinzu. Weise dem ersten eine `class` von `eyes left` und dem zweiten eine `class` von `eyes right` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `div` elements nested in your `#eyes-div` element.
|
||||
Du solltest zwei `div`-Elemente in deinem `#eyes-div`-Element eingebettet haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.length === 2);
|
||||
```
|
||||
|
||||
The first new `div` should have the `class` set to `eyes left`.
|
||||
Das erste neue `div` sollte die `class` auf `eyes left` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes'));
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left'));
|
||||
```
|
||||
|
||||
The second new `div` should have the `class` set to `eyes right`.
|
||||
Das zweite neue `div` sollte die `class` auf `eyes right` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes'));
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-59
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `#triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`.
|
||||
Du wirst innerhalb des `#triangles`-divs Elemente hinzufügen müssen, die deine Dreiecke werden sollen. Erstelle dreißig `div`-Elemente und weise jedem von ihnen die Klasse `triangle` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have 30 `div` elements within your `#triangles` element.
|
||||
Du solltest innerhalb deines `#triangles`-Elements 30 `div`-Elemente haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#triangles > div')?.length === 30);
|
||||
```
|
||||
|
||||
All 30 of your new `div` elements should have the `class` set to `triangle`.
|
||||
Alle 30 deiner neuen `div`-Elemente sollten die `class` auf `triangle` gesetzt haben.
|
||||
|
||||
```js
|
||||
const divDivDiv = document.querySelectorAll('#triangles > div');
|
||||
|
||||
@@ -7,31 +7,31 @@ dashedName: step-60
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `#guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`.
|
||||
Erstelle drei `div`-Elemente innerhalb deines `#guitar`-Elements. Give the first two a `class` value of `guitar`. Weise dann dem ersten eine `id` von `guitar-left` und dem zweiten eine `id` von `guitar-right` zu. Füge eine `id` zum dritten `div` mit dem Wert `guitar-neck` hinzu.
|
||||
|
||||
The third `div` should not have the `guitar` class.
|
||||
Das dritte `div` sollte keine `guitar`-Klasse enthalten.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three new `div` elements within your `#guitar` element.
|
||||
Du solltest drei neue `div`-Elemente innerhalb deines `#guitar`-Elements erstellen.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.length === 3);
|
||||
```
|
||||
|
||||
Your first new `div` should have a `class` set to `guitar`.
|
||||
Dein erstes neues `div` sollte eine `class` von `guitar` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar'));
|
||||
```
|
||||
|
||||
Your first new `div` should have an `id` set to `guitar-left`.
|
||||
Dein erstes neues `div` sollte eine `id` von `guitar-left` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left');
|
||||
```
|
||||
|
||||
Your second new `div` should have a `class` set to `guitar`.
|
||||
Dein zweites neues `div` sollte eine `class` von `guitar` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar'));
|
||||
@@ -43,13 +43,13 @@ Your second new `div` should have an `id` set to `guitar-right`.
|
||||
assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right');
|
||||
```
|
||||
|
||||
Your third new `div` should have an `id` set to `guitar-neck`.
|
||||
Dein drittes neues `div` sollte eine `id` von `guitar-neck` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck');
|
||||
```
|
||||
|
||||
You should not give the third new `div` a `class` of `guitar`.
|
||||
Du solltest dem dritten neuen `div` keine `class` von `guitar` zuweisen.
|
||||
|
||||
```js
|
||||
assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-65
|
||||
|
||||
# --description--
|
||||
|
||||
The `#black-round-hat` element should probably be round. Give it a `border-radius` of `50%` to fix this.
|
||||
Das `#black-round-hat`-Element sollte wahrscheinlich rund sein. Give it a `border-radius` of `50%` to fix this.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-85
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#guitar-neck` element a `z-index` of `3`.
|
||||
Weise dem `#guitar-neck`-Element einen `z-index` von `3` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-74
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `.triangle` elements the correct color. Setze die `border-top-color`, `border-bottom-color` und `border-left-color` auf `transparent`. Setze die `border-right-color` auf `Gold`.
|
||||
Weise deinen `.triangle`-Elementen die richtige Farbe zu. Setze die `border-top-color`, `border-bottom-color` und `border-left-color` auf `transparent`. Setze die `border-right-color` auf `Gold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-73
|
||||
|
||||
# --description--
|
||||
|
||||
Style the border of your `.triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`.
|
||||
Gestalte den Rand deiner `.triangle`-Elemente. Setze die `border-style` auf `solid` und die `border-width` auf `42px 45px 45px 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.triangle` selector should have a `border-style` property set to `solid`.
|
||||
Dein `.triangle`-Selektor sollte eine `border-style`-Eigenschaft auf `solid` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid');
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-71
|
||||
|
||||
# --description--
|
||||
|
||||
Target the element with the id `triangles` using an id selector. Set the `width` to `250px` and the `height` to `550px`.
|
||||
Target the element with the id `triangles` using an id selector. Setze die `width` auf `250px` und die `height` auf `550px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `#triangles` selector.
|
||||
Du solltest einen `#triangles`-Selektor hinzufügen.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles'));
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-78
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#guitar` rule a `z-index` of `3`.
|
||||
Weise der `#guitar`-Regel einen `z-index` von `3` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#guitar` selector should have a `z-index` property set to `3`.
|
||||
Dein `#guitar`-Selektor sollte eine `z-index`-Eigenschaft von `3` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
|
||||
|
||||
@@ -25,7 +25,7 @@ ths?.forEach(th => {
|
||||
});
|
||||
```
|
||||
|
||||
Each of your new `span` elements should have the `class` attribute set to `sr-only year`.
|
||||
Jedes deiner neuen `span`-Elemente sollte das `class`-Attribut auf `sr-only year` gesetzt haben.
|
||||
|
||||
```js
|
||||
const ths = [...document.querySelectorAll('th')];
|
||||
@@ -47,19 +47,19 @@ Your second `span` element should have the text `2020`.
|
||||
assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
|
||||
```
|
||||
|
||||
Your third `span` element should have the text `2021`.
|
||||
Dein drittes `span`-Element sollte den Text `2021` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
|
||||
```
|
||||
|
||||
Your third `th` element should have the `class` set to `current`.
|
||||
Dein drittes `th`-Element sollte die `class` auf `current` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
|
||||
```
|
||||
|
||||
Your `td` element should be empty.
|
||||
Dein `td`-Element sollte leer sein.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
|
||||
|
||||
@@ -13,13 +13,13 @@ Following that, add three `td` elements with the following text (in order): `$54
|
||||
|
||||
# --hints--
|
||||
|
||||
Your second `tr` should have a `th` element.
|
||||
Dein zweites `tr` sollte ein `th`-Element enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
|
||||
```
|
||||
|
||||
Your `th` element should have the text `Checking Our primary transactional account.`.
|
||||
Dein `th`-Element sollte den Text `Checking Our primary transactional account.` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
|
||||
@@ -31,37 +31,37 @@ You should wrap the text `Our primary transactional account.` in a `span` elemen
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
|
||||
```
|
||||
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
Dein `span`-Element sollte das `class`-Attribut auf `description` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
You should have three `td` elements.
|
||||
Du solltest drei `td`-Elemente haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
|
||||
```
|
||||
|
||||
Your first `td` element should have the text `$54`.
|
||||
Dein erstes `td`-Element sollte den Text `$54` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
|
||||
```
|
||||
|
||||
Your second `td` element should have the text `$56`.
|
||||
Dein zweites `td`-Element sollte den Text `$56` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
|
||||
```
|
||||
|
||||
Your third `td` element should have the text `$53`.
|
||||
Dein drittes `td`-Element sollte den Text `$53` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
|
||||
```
|
||||
|
||||
Your third `td` element should have the `class` set to `current`.
|
||||
Dein drittes `td`-Element sollte die `class` auf `current` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
|
||||
|
||||
@@ -7,19 +7,19 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Within the second `tr`, add a `th` element with the text `Expenses Annual anticipated expenses, such as payroll.`. Wrap that text, except for `Expenses`, within a `span` element with the `class` set to `description`.
|
||||
Füge innerhalb des zweiten `tr` ein `th`-Element mit dem Text `Expenses Annual anticipated expenses, such as payroll.` hinzu. Wrap that text, except for `Expenses`, within a `span` element with the `class` set to `description`.
|
||||
|
||||
Add three `td` elements below that, and give them the following text, in order: `$200`, `$300`, and `$400`. Give the third `td` element a `class` set to `current`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your second `tr` should have a `th` element.
|
||||
Dein zweites `tr` sollte ein `th`-Element enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
|
||||
```
|
||||
|
||||
Your `th` element should have the text `Expenses Annual anticipated expenses, such as payroll.`.
|
||||
Dein `th`-Element sollte den Text `Expenses Annual anticipated expenses, such as payroll.` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
|
||||
@@ -31,37 +31,37 @@ You should wrap the text `Annual anticipated expenses, such as payroll.` in a `s
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
|
||||
```
|
||||
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
Dein `span`-Element sollte das `class`-Attribut auf `description` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
You should have three `td` elements.
|
||||
Du solltest drei `td`-Elemente haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
|
||||
```
|
||||
|
||||
Your first `td` element should have the text `$200`.
|
||||
Dein erstes `td`-Element sollte den Text `$200` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
|
||||
```
|
||||
|
||||
Your second `td` element should have the text `$300`.
|
||||
Dein zweites `td`-Element sollte den Text `$300` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
|
||||
```
|
||||
|
||||
Your third `td` element should have the text `$400`.
|
||||
Dein drittes `td`-Element sollte den Text `$400` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
|
||||
```
|
||||
|
||||
Your third `td` element should have the `class` set to `current`.
|
||||
Dein drittes `td`-Element sollte die `class` auf `current` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
Within the third `tr`, add a `th` element with the text `Credit The outstanding balance on our credit card.`. Wrap that text, except for `Credit`, within a `span` element with the `class` set to `description`.
|
||||
Füge innerhalb des dritten `tr` ein `th`-Element mit dem Text `Credit The outstanding balance on our credit card.` hinzu. Wrap that text, except for `Credit`, within a `span` element with the `class` set to `description`.
|
||||
|
||||
Add three `td` elements below that, and give them the following text, in order: `$50`, `$50`, and `$75`. Give the third `td` element a `class` set to `current`.
|
||||
|
||||
@@ -31,13 +31,13 @@ You should wrap the text `The outstanding balance on our credit card.` in a `spa
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
|
||||
```
|
||||
|
||||
Your `span` element should have the `class` attribute set to `description`.
|
||||
Dein `span`-Element sollte das `class`-Attribut auf `description` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
|
||||
```
|
||||
|
||||
You should have three `td` elements.
|
||||
Du solltest drei `td`-Elemente haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
|
||||
@@ -49,19 +49,19 @@ Your first `td` element should have the text `$50`.
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
|
||||
```
|
||||
|
||||
Your second `td` element should have the text `$50`.
|
||||
Dein zweites `td`-Element sollte den Text `$50` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
|
||||
```
|
||||
|
||||
Your third `td` element should have the text `$75`.
|
||||
Dein drittes `td`-Element sollte den Text `$75` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
|
||||
```
|
||||
|
||||
Your third `td` element should have the `class` set to `current`.
|
||||
Dein drittes `td`-Element sollte die `class` auf `current` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
|
||||
|
||||
@@ -7,23 +7,23 @@ dashedName: step-26
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
|
||||
Erstelle innerhalb deines `thead` ein `tr`-Element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `thead` element should have a `tr` element.
|
||||
Dein `thead`-Element sollte ein `tr`-Element enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
|
||||
```
|
||||
|
||||
Your `tr` element should have a `td` element as the first child.
|
||||
Dein `tr`-Element sollte ein `td`-Element als erstes untergeordnetes Element enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
|
||||
```
|
||||
|
||||
Your `tr` element should have three `th` elements, after the `td` element.
|
||||
Dein `tr`-Element sollte drei `th`-Elemente nach dem `td`-Element haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
|
||||
@@ -31,7 +31,7 @@ assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
|
||||
```
|
||||
|
||||
Each of your `th` elements should have a `span` element.
|
||||
Jedes deiner `th`-Elemente sollte ein `span`-Element enthalten.
|
||||
|
||||
```js
|
||||
const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
|
||||
@@ -50,25 +50,25 @@ ths?.forEach(th => {
|
||||
});
|
||||
```
|
||||
|
||||
Your first `span` element should have the text `2019`.
|
||||
Dein erstes `span`-Element sollte den Text `2019` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
|
||||
```
|
||||
|
||||
Your second `span` element should have the text `2020`.
|
||||
Dein zweites `span`-Element sollte den Text `2020` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
|
||||
```
|
||||
|
||||
Your third `span` element should have the text `2021`.
|
||||
Dein drittes `span`-Element sollte den Text `2021` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
|
||||
```
|
||||
|
||||
Your `td` element should be empty.
|
||||
Dein `td`-Element sollte leer sein.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
|
||||
|
||||
@@ -7,19 +7,19 @@ dashedName: step-31
|
||||
|
||||
# --description--
|
||||
|
||||
The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
|
||||
Die `clip`-CSS-Eigenschaft wird verwendet, um die sichtbaren Teile eines Elements zu definieren. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
|
||||
|
||||
The `clip-path` property determines the shape the `clip` property should take. Set the `clip-path` property to the value of `inset(50%)`, forming the clip-path into a rectangle within the element.
|
||||
Die `clip-path`-Eigenschaft bestimmt die Form, die die `clip`-Eigenschaft annehmen soll. Set the `clip-path` property to the value of `inset(50%)`, forming the clip-path into a rectangle within the element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span[class~="sr-only"]` selector should have a `clip` property set to `rect(1px, 1px, 1px, 1px)`.
|
||||
Dein `span[class~="sr-only"]`-Selektor sollte eine `clip`-Eigenschaft von `rect(1px, 1px, 1px, 1px)` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
|
||||
```
|
||||
|
||||
Your `span[class~="sr-only"]` selector should have a `clip-path` property set to `inset(50%)`.
|
||||
Dein `span[class~="sr-only"]`-Selektor sollte eine `clip-path`-Eigenschaft auf `inset(50%)` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-32
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to size these elements down. Give your `span[class~="sr-only"]` selector a `width` and `height` property set to `1px`.
|
||||
Jetzt musst du diese Elemente verkleinern. Weise deinem `span[class~="sr-only"]`-Selektor eine `width`- und `height`-Eigenschaft mit dem Wert `1px` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,13 +11,13 @@ To prevent the text content from overflowing, give your `span[class~="sr-only"]`
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span[class~="sr-only"]` selector should have an `overflow` property set to `hidden`.
|
||||
Dein `span[class~="sr-only"]`-Selektor sollte eine `overflow`-Eigenschaft auf `hidden` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
|
||||
```
|
||||
|
||||
Your `span[class~="sr-only"]` selector should have a `white-space` property set to `nowrap`.
|
||||
Dein `span[class~="sr-only"]`-Selektor sollte eine `white-space`-Eigenschaft auf `nowrap` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
|
||||
|
||||
@@ -7,29 +7,29 @@ dashedName: step-35
|
||||
|
||||
# --description--
|
||||
|
||||
Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
|
||||
Time to style your table heading. Erstelle einen `h1`-Selektor. Weise ihm eine `max-width`-Eigenschaft von `37.25rem`, eine `margin`-Eigenschaft von `0 auto` und eine `padding`-Eigenschaft von `1.5rem 1.25rem` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `h1` selector.
|
||||
Du solltest einen `h1`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||
```
|
||||
|
||||
Your `h1` selector should have a `max-width` property set to `37.25rem`.
|
||||
Dein `h1`-Selektor sollte eine `max-width`-Eigenschaft von `37.25rem` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
|
||||
```
|
||||
|
||||
Your `h1` selector should have a `margin` property set to `0 auto`.
|
||||
Dein `h1`-Selektor sollte eine `margin`-Eigenschaft von `0 auto` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
|
||||
```
|
||||
|
||||
Your `h1` selector should have a `padding` property set to `1.5rem 1.25rem`.
|
||||
Dein `h1`-Selektor sollte eine `padding`-Eigenschaft von `1.5rem 1.25rem` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-46
|
||||
|
||||
# --description--
|
||||
|
||||
Before you start diving in to the table itself, your `span` elements are currently bolded. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
|
||||
Bevor du dich mit der Tabelle beschäftigst: Deine `span`-Elemente sind derzeit fett gedruckt. Create a `span:not(.sr-only)` selector and give it a `font-weight` property set to `normal`.
|
||||
|
||||
The `:not()` pseudo-selector is used to target all elements that do not match the selector - in this case, any of your `span` elements that do not have the `sr-only` class. This ensures that your earlier rules for the `span[class~="sr-only"]` selector are not overwritten.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `span:not(.sr-only)` selector.
|
||||
Du solltest einen `span:not(.sr-only)`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
|
||||
|
||||
@@ -11,13 +11,13 @@ The `:nth-of-type()` pseudo-selector is used to target specific elements based o
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `tr.total td:nth-of-type(3)` selector.
|
||||
Du solltest einen `tr.total td:nth-of-type(3)`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
|
||||
```
|
||||
|
||||
Your `tr.total td:nth-of-type(3)` selector should have a `padding-right` property set to `0.5rem`.
|
||||
Dein `tr.total td:nth-of-type(3)`-Selektor sollte eine `padding-right`-Eigenschaft von `0.5rem` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
|
||||
|
||||
@@ -18,42 +18,42 @@ const key = document.querySelectorAll('.key')?.[1];
|
||||
assert(key?.className?.includes('black--key'));
|
||||
```
|
||||
|
||||
Your third `.key` should have `black--key` in the `class`.
|
||||
Dein dritter `.key` sollte `black--key` in der `class` haben.
|
||||
|
||||
```js
|
||||
const third = document.querySelectorAll('.key')?.[2];
|
||||
assert(third?.classList?.contains('black--key'));
|
||||
```
|
||||
|
||||
Your fifth `.key` should have `black--key` in the `class`.
|
||||
Dein fünfter `.key` sollte `black--key` in der `class` haben.
|
||||
|
||||
```js
|
||||
const fifth = document.querySelectorAll('.key')?.[4];
|
||||
assert(fifth?.classList?.contains('black--key'));
|
||||
```
|
||||
|
||||
Your sixth `.key` should have `black--key` in the `class`.
|
||||
Dein sechster `.key` sollte `black--key` in der `class` haben.
|
||||
|
||||
```js
|
||||
const sixth = document.querySelectorAll('.key')?.[5];
|
||||
assert(sixth?.classList?.contains('black--key'));
|
||||
```
|
||||
|
||||
Your seventh `.key` should have `black--key` in the `class`.
|
||||
Dein siebter `.key` sollte `black--key` in der `class` haben.
|
||||
|
||||
```js
|
||||
const seventh = document.querySelectorAll('.key')?.[6];
|
||||
assert(seventh?.classList?.contains('black--key'));
|
||||
```
|
||||
|
||||
You should have five `.black--key` elements.
|
||||
Du solltest fünf `.black--key`-Elemente haben.
|
||||
|
||||
```js
|
||||
const blackKeys = document.querySelectorAll('.black--key');
|
||||
assert(blackKeys?.length === 5);
|
||||
```
|
||||
|
||||
You should have seven `.key` elements.
|
||||
Du solltest sieben `.key`-Elemente haben.
|
||||
|
||||
```js
|
||||
const keys = document.querySelectorAll('.key');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-13
|
||||
|
||||
# --description--
|
||||
|
||||
Time to style the keys. Visiere unter der `#piano`-Regel das `.keys`-Element mit einem `class`-Selektor an. Weise der neuen Regel eine `background-color`-Eigenschaft von `#040404`, eine `width`-Eigenschaft von `949px` und eine `height`-Eigenschaft von `180px` zu.
|
||||
Es ist Zeit, die Tasten zu gestalten. Visiere unter der `#piano`-Regel das `.keys`-Element mit einem `class`-Selektor an. Weise der neuen Regel eine `background-color`-Eigenschaft von `#040404`, eine `width`-Eigenschaft von `949px` und eine `height`-Eigenschaft von `180px` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -23,13 +23,13 @@ Dein `.keys`-Selektor sollte eine `background-color`-Eigenschaft von `#040404` e
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
|
||||
```
|
||||
|
||||
Your `.keys` selector should have the `width` property set to `949px`.
|
||||
Dein `.keys`-Selektor sollte die `width`-Eigenschaft auf `949px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
|
||||
```
|
||||
|
||||
Your `.keys` selector should have a `height` property set to `180px`.
|
||||
Dein `.keys`-Selektor sollte eine `height`-Eigenschaft von `180px` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Beginne mit der Gestaltung des Logos, indem du einen `.logo`-Selektor erstellst. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`.
|
||||
Beginne mit der Gestaltung des Logos, indem du einen `.logo`-Selektor erstellst. Setze die `width` auf `200px`, `position` auf `absolute` und `top` auf `23px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`.
|
||||
Das `img`-Element benötigt eine `position` als Referenzpunkt für das Elternelement. Setze die `position` vom `#piano`-Selektor auf `relative`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#piano` selector should have a `position` property set to `relative`.
|
||||
Dein `#piano`-Selektor sollte eine `position`-Eigenschaft mit dem Wert `relative` enthalten.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
|
||||
|
||||
@@ -12,7 +12,7 @@ Within the `@media` query, add a `.keys` selector and set the `width` to `318px`
|
||||
# --hints--
|
||||
|
||||
|
||||
Your `@media` rule should have a `.keys` selector.
|
||||
Deine `@media`-Regel sollte einen `.keys`-Selektor enthalten.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
|
||||
@@ -20,7 +20,7 @@ const keys = rules?.find(rule => rule.selectorText === '.keys');
|
||||
assert(keys);
|
||||
```
|
||||
|
||||
Your new `.keys` selector should have a `width` of `318px`.
|
||||
Dein neuer `.keys`-Selektor sollte eine `width` von `318px` enthalten.
|
||||
|
||||
```js
|
||||
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
|
||||
|
||||
@@ -7,15 +7,15 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
In the CSS box model, every HTML element is treated as a box with four areas.
|
||||
In dem CSS-Box-Modell wird jedes HTML-Element wie eine Box mit vier Bereichen behandelt.
|
||||
|
||||
Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element.
|
||||
Stelle dir vor, dass du eine Box von deinem Lieblings-Onlinehändler erhältst - der Inhalt ist der Artikel in der Box, oder in unserem Fall, ein Header, Paragraph oder Bildelement.
|
||||
|
||||
Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
|
||||
Ändere das `src`-Attribut im `<img>` von `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` zu `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
|
||||
Das `img`-Element sollte eine `src` von `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
Change the `background-color` of the canvas to `#4d0f00`.
|
||||
Ändere die `background-color` der Canvas auf `#4d0f00`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -18,7 +18,7 @@ const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have a `background-color` of `#4d0f00`.
|
||||
Dein `.canvas`-Element sollte eine `background-color` von `#4d0f00` enthalten.
|
||||
|
||||
```js
|
||||
const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
|
||||
|
||||
@@ -9,18 +9,18 @@ dashedName: step-13
|
||||
|
||||
The frame is much too wide.
|
||||
|
||||
In `.frame`, set its `width` to 500 pixels.
|
||||
Setze seine `width` in `.frame` auf 500 Pixel.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `width` property to `500px`.
|
||||
Du solltest die `width`-Eigenschaft auf `500px` setzen.
|
||||
|
||||
```js
|
||||
const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
|
||||
assert(widthFilter.length === 2);
|
||||
```
|
||||
|
||||
Your `.frame` element should have a `width` of `500px`.
|
||||
Dein `.frame`-Element sollte eine `width` von `500px` enthalten.
|
||||
|
||||
```js
|
||||
const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
|
||||
|
||||
@@ -9,17 +9,17 @@ dashedName: step-16
|
||||
|
||||
Add a new `div` element inside of your `.canvas` element.
|
||||
|
||||
Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle.
|
||||
Weise dem neuen `div` das `class`-Attribut mit einem Wert von `one` zu. Dies wird dein erstes Rechteck sein.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element.
|
||||
Du solltest ein neues `div`-Element erstellen.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 3);
|
||||
```
|
||||
|
||||
You should nest the new `div` element within your `.canvas` element.
|
||||
Du solltest das neue `div`-Element in dein `.canvas`-Element einbetten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
|
||||
|
||||
@@ -7,18 +7,18 @@ dashedName: step-18
|
||||
|
||||
# --description--
|
||||
|
||||
Now set the `height` for `.one` to 150 pixels.
|
||||
Setze nun die `height` für `.one` auf 150 Pixel.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `height` property to `150px`.
|
||||
Du solltest die `height`-Eigenschaft auf `150px` setzen.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `height` value of `150px`.
|
||||
Dein `.one`-Element sollte einen `height`-Wert von `150px` enthalten.
|
||||
|
||||
```js
|
||||
const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
|
||||
|
||||
@@ -13,14 +13,14 @@ Add `padding` of `1px` to the `.canvas` element to give the `.one` element somet
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `padding` property to `1px`.
|
||||
Du solltest die `padding`-Eigenschaft auf `1px` setzen.
|
||||
|
||||
```js
|
||||
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
|
||||
assert(hasPadding);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have a `padding` value of `1px`.
|
||||
Dein `.canvas`-Element sollte einen `padding`-Wert von `1px` enthalten.
|
||||
|
||||
```js
|
||||
const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
|
||||
|
||||
@@ -7,29 +7,29 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle.
|
||||
Füge direkt unter deinem `one`-Element ein weiteres `div` mit einem `class`-Wert von `two` hinzu. Dies wird dein zweites Rechteck sein.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `.one` element.
|
||||
Du solltest das vorhandene `.one`-Element nicht ändern.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.one').length === 1);
|
||||
```
|
||||
|
||||
You should have a second `div` element in your `.canvas` element.
|
||||
Du solltest ein zweites `div`-Element innerhalb deines `.canvas`-Elements haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
|
||||
```
|
||||
|
||||
Your second `div` element should have a `class` value of `two`.
|
||||
Dein zweites `div`-Element sollte einen `class`-Wert von `two` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
|
||||
```
|
||||
|
||||
Your `.two` element should come after your `.one` element.
|
||||
Dein `.two`-Element sollte nach deinem `.one`-Element stehen.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
|
||||
|
||||
@@ -7,18 +7,18 @@ dashedName: step-30
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `height` of `.three` to `28%`.
|
||||
Setze die `height` von `.three` auf `28%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `height` property to `28%`.
|
||||
Du solltest die `height`-Eigenschaft auf `28%` setzen.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `height` value of `28%`.
|
||||
Dein `.three`-Element sollte einen `height`-Wert von `28%` enthalten.
|
||||
|
||||
```js
|
||||
const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
|
||||
|
||||
@@ -11,7 +11,7 @@ Create a rule that targets both `.one` and `.two` and increase their `blur` effe
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.one, .two` selector list.
|
||||
Du solltest eine `.one, .two`-Selektorliste haben.
|
||||
|
||||
```js
|
||||
const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
|
||||
@@ -25,7 +25,7 @@ const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.styl
|
||||
assert(hasFilter)
|
||||
```
|
||||
|
||||
Your `.one` element should have a `filter` value of `blur(1px)`.
|
||||
Dein `.one`-Element sollte einen `filter`-Wert von `blur(1px)` enthalten.
|
||||
|
||||
```js
|
||||
const one = document.querySelector('.one');
|
||||
|
||||
@@ -7,20 +7,20 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
The corners of each rectangle are still too sharp.
|
||||
Die Ecken jedes Rechtecks sind immer noch zu scharf.
|
||||
|
||||
Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
|
||||
Runde jede Ecke des `.one`-Elements um 9 Pixel ab, indem du die `border-radius`-Eigenschaft verwendest.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `border-radius` property to `9px`.
|
||||
Du solltest die `border-radius`-Eigenschaft auf `9px` setzen.
|
||||
|
||||
```js
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
|
||||
assert(hasBorderRadius);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `border-radius` value of `9px`.
|
||||
Dein `.one`-Element sollte einen `border-radius`-Wert von `9px` enthalten.
|
||||
|
||||
```js
|
||||
const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
|
||||
|
||||
@@ -7,29 +7,29 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
Add a second `p` element with the text `Serving size 2/3 cup (55g)`.
|
||||
Füge ein zweites `p`-Element mit dem Text `Serving size 2/3 cup (55g)` hinzu.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a second `p` element.
|
||||
Du solltest ein zweites `p`-Element haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('p')?.length === 2);
|
||||
```
|
||||
|
||||
Your second `p` element should be within your `body` element.
|
||||
Dein zweites `p`-Element sollte sich innerhalb deines `body`-Elements befinden.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
|
||||
```
|
||||
|
||||
Your second `p` element should come after your existing `p` element.
|
||||
Dein zweites `p`-Element sollte nach deinem vorhandenen `p`-Element stehen.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
|
||||
```
|
||||
|
||||
Your second `p` element should have the text `Serving size 2/3 cup (55g)`.
|
||||
Dein zweites `p`-Element sollte den Text `Serving size 2/3 cup (55g)` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`.
|
||||
Weise deinem `.label`-Selektor eine `margin`-Eigenschaft von `20px auto` und eine `padding`-Eigenschaft von `0 7px` zu.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.label` selector should have a `margin` property set to `20px auto`.
|
||||
Dein `.label`-Selektor sollte eine `margin`-Eigenschaft auf `20px auto` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
|
||||
```
|
||||
|
||||
Your `.label` selector should have a `padding` property set to `0 7px`.
|
||||
Dein `.label`-Selektor sollte eine `padding`-Eigenschaft auf `0 7px` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-27
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
|
||||
Create a new `.large` selector and give it a `height` property set to `10px`. Erstelle auch einen `.large, .medium`-Selektor und setze die `background-color`-Eigenschaft auf `black`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `.large` selector.
|
||||
Du solltest einen neuen `.large`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large'));
|
||||
@@ -23,13 +23,13 @@ Your `.large` selector should have a `height` property set to `10px`.
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
|
||||
```
|
||||
|
||||
You should have a new `.large, .medium` selector.
|
||||
Du solltest einen neuen `.large, .medium`-Selektor haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
|
||||
```
|
||||
|
||||
Your `.large, .medium` selector should have a `background-color` property set to `black`.
|
||||
Dein `.large, .medium`-Selektor sollte eine `background-color`-Eigenschaft auf `black` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-53
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle nach deinem letzten `.divider` ein neues `p`-Element mit dem Text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` of `bold`. Umschließe den Text `0%` mit einem weiteren `span`-Element, wobei die `class` auf `bold` gesetzt ist. Finally, nest the `Cholesterol` `span` element and the text `0mg` in an additional `span` element for alignment.
|
||||
Erstelle nach deinem letzten `.divider` ein neues `p`-Element mit dem Text `Cholesterol 0mg 0%`. Umschließe den Text `Cholesterol` mit einem `span`-Element und weise diesem `span`-Element die `class` `bold` zu. Umschließe den Text `0%` mit einem weiteren `span`-Element, wobei die `class` auf `bold` gesetzt ist. Bette schließlich das `Cholesterol`-`span`-Element und den Text `0mg` in einem weiteren `span`-Element zur Ausrichtung ein.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -38,7 +38,7 @@ const cholesterolSpan = spans.filter(span => span?.innerHTML?.match(/^[\s\n]*Cho
|
||||
assert(cholesterolSpan.length === 1);
|
||||
```
|
||||
|
||||
Your `Cholesterol` `span` should have the `class` attribute set to `bold`.
|
||||
Dein `span`-Element mit `Cholesterol` sollte das `class`-Attribut auf `bold` eingestellt haben.
|
||||
|
||||
```js
|
||||
const spans = [...document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-60
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
|
||||
Füge unter deinem `.double-indent`-Element ein neues `p`-Element mit dem Text `Includes 10g Added Sugars 20%` hinzu. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned.
|
||||
|
||||
Then create another divider after that `p` element.
|
||||
|
||||
@@ -33,13 +33,13 @@ assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classLi
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
|
||||
```
|
||||
|
||||
Your new `p` element should have a `span` element.
|
||||
Dein neues `p`-Element sollte ein `span`-Element enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
|
||||
```
|
||||
|
||||
Your `span` element should have the `class` attribute set to `bold`.
|
||||
Dein `span`-Element sollte das `class`-Attribut auf `bold` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
|
||||
@@ -51,7 +51,7 @@ Your `span` element should wrap the text `20%`.
|
||||
assert(document.querySelector('.daily-value.small-text p:last-of-type span')?.innerText === '20%');
|
||||
```
|
||||
|
||||
Your new `div` should have the `class` attribute set to `divider`.
|
||||
Dein neues `div` sollte das `class`-Attribut auf `divider` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));
|
||||
|
||||
@@ -8,21 +8,21 @@ dashedName: build-a-cash-register
|
||||
|
||||
# --description--
|
||||
|
||||
Design a cash register drawer function `checkCashRegister()` that accepts purchase price as the first argument (`price`), payment as the second argument (`cash`), and cash-in-drawer (`cid`) as the third argument.
|
||||
Entwirf eine Registrierkassenfunktion `checkCashRegister()`, die als erstes Argument den Kaufpreis (`price`), als zweites Argument das übergebene Bargeld (`cash`) und als drittes Argument den Kassenbestand (`cid`) akzeptiert.
|
||||
|
||||
`cid` is a 2D array listing available currency.
|
||||
`cid` ist ein 2D-Array mit den verfügbaren Währungen.
|
||||
|
||||
The `checkCashRegister()` function should always return an object with a `status` key and a `change` key.
|
||||
Die `checkCashRegister()`-Funktion sollte immer ein Objekt mit den Schlüsseln `status` und `change` zurückgeben.
|
||||
|
||||
Return `{status: "INSUFFICIENT_FUNDS", change: []}` if cash-in-drawer is less than the change due, or if you cannot return the exact change.
|
||||
Gib `{status: "INSUFFICIENT_FUNDS", change: []}` zurück, wenn der Kassenbestand nicht das benötigte Wechselgeld hergibt oder du das genaue Wechselgeld nicht zurückgeben kannst.
|
||||
|
||||
Return `{status: "CLOSED", change: [...]}` with cash-in-drawer as the value for the key `change` if it is equal to the change due.
|
||||
Gib `{status: "CLOSED", change: [...]}` mit dem vorhandenen Wechselgeld als Wert für den Schlüssel `change` zurück, wenn der Kassenbestand gleich dem fälligen Wechselgeld ist.
|
||||
|
||||
Otherwise, return `{status: "OPEN", change: [...]}`, with the change due in coins and bills, sorted in highest to lowest order, as the value of the `change` key.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Währungseinheit</th><th>Amount</th></tr><tr><td>Penny</td><td>$0.01 (PENNY)</td></tr><tr><td>Nickel</td><td>$0.05 (NICKEL)</td></tr><tr><td>Dime</td><td>$0.1 (DIME)</td></tr><tr><td>Quarter</td><td>$0.25 (QUARTER)</td></tr><tr><td>Dollar</td><td>$1 (ONE)</td></tr><tr><td>Fünf Dollar</td><td>$5 (FIVE)</td></tr><tr><td>Zehn Dollar</td><td>$10 (TEN)</td></tr><tr><td>Zwanzig Dollar</td><td>$20 (TWENTY)</td></tr><tr><td>Einhundert Dollar</td><td>$100 (ONE HUNDRED)</td></tr></tbody></table>
|
||||
<table class='table table-striped'><tbody><tr><th>Währungseinheit</th><th>Betrag</th></tr><tr><td>Penny</td><td>$0.01 (PENNY)</td></tr><tr><td>Nickel</td><td>$0.05 (NICKEL)</td></tr><tr><td>Dime</td><td>$0.1 (DIME)</td></tr><tr><td>Quarter</td><td>$0.25 (QUARTER)</td></tr><tr><td>Dollar</td><td>$1 (ONE)</td></tr><tr><td>Fünf Dollar</td><td>$5 (FIVE)</td></tr><tr><td>Zehn Dollar</td><td>$10 (TEN)</td></tr><tr><td>Zwanzig Dollar</td><td>$20 (TWENTY)</td></tr><tr><td>Einhundert Dollar</td><td>$100 (ONE HUNDRED)</td></tr></tbody></table>
|
||||
|
||||
See below for an example of a cash-in-drawer array:
|
||||
Anbei ein Beispiel für einen Array mit Wechselgeld:
|
||||
|
||||
```js
|
||||
[
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: aaa48de84e1ecc7c742e1124
|
||||
title: Build A Palindrome Checker
|
||||
title: Erstelle einen Palindrom-Prüfer
|
||||
challengeType: 5
|
||||
forumTopicId: 16004
|
||||
dashedName: build-a-palindrome-checker
|
||||
@@ -8,19 +8,19 @@ dashedName: build-a-palindrome-checker
|
||||
|
||||
# --description--
|
||||
|
||||
Return `true` if the given string is a palindrome. Otherwise, return `false`.
|
||||
Gib `true` zurück, falls der übergebene String ein Palindrom ist. Gib ansonsten `false` zurück.
|
||||
|
||||
A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
|
||||
Ein <dfn>Palindrom</dfn> kann sowohl ein Wort als auch ein Satz sein, das sowohl vorwärts als auch rückwärts gelesen dasselbe Wort bzw. denselben Satz ergibt. Interpunktion, Leerzeichen sowie Groß- und Kleinschreibung ausgenommen.
|
||||
|
||||
**Note:** You'll need to remove **all non-alphanumeric characters** (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.
|
||||
**Hinweis:** Entferne **alle nicht alphanumerischen Zeichen** (Interpunktion, Leerzeichen und Symbole) und setze alles in dieselbe Schreibweise (Klein- oder Großbuchstaben), um nach Palindromen zu filtern.
|
||||
|
||||
We'll pass strings with varying formats, such as `racecar`, `RaceCar`, and `race CAR` among others.
|
||||
|
||||
We'll also pass strings with special symbols, such as `2A3*3a2`, `2A3 3a2`, and `2_A3*3#A2`.
|
||||
Auch Strings mit speziellen Symbolen wie `2A3*3a2`, `2A3 3a2` und `2_A3*3#A2` werden dir übergeben.
|
||||
|
||||
# --hints--
|
||||
|
||||
`palindrome("eye")` should return a boolean.
|
||||
`palindrome("eye")` sollte einen Boolean zurückgeben.
|
||||
|
||||
```js
|
||||
assert(typeof palindrome('eye') === 'boolean');
|
||||
@@ -50,7 +50,7 @@ assert(palindrome('race car') === true);
|
||||
assert(palindrome('not a palindrome') === false);
|
||||
```
|
||||
|
||||
`palindrome("A man, a plan, a canal. Panama")` should return `true`.
|
||||
`palindrome("A man, a plan, a canal. Panama")` sollte `true` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(palindrome('A man, a plan, a canal. Panama') === true);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: a7f4d8f2483413a6ce226cac
|
||||
title: Build A Roman Numeral Converter
|
||||
title: Erstelle einen Konverter für römische Zahlen
|
||||
challengeType: 5
|
||||
forumTopicId: 16044
|
||||
dashedName: build-a-roman-numeral-converter
|
||||
@@ -26,7 +26,7 @@ Konvertiere die übergebene Zahl in eine römische Zahl.
|
||||
| IV | 4 |
|
||||
| I | 1 |
|
||||
|
||||
All roman numerals answers should be provided in upper-case.
|
||||
Römische Ziffern sollten in Großbuchstaben übergeben werden.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: aff0395860f5d3034dc0bfc9
|
||||
title: Build a Telephone Number Validator
|
||||
title: Erstelle einen Telefonnummern-Validator
|
||||
challengeType: 5
|
||||
forumTopicId: 16090
|
||||
dashedName: build-a-telephone-number-validator
|
||||
@@ -8,17 +8,17 @@ dashedName: build-a-telephone-number-validator
|
||||
|
||||
# --description--
|
||||
|
||||
Return `true` if the passed string looks like a valid US phone number.
|
||||
Gibt `true` zurück, wenn der übergebene String wie eine gültige US-Telefonnummer aussieht.
|
||||
|
||||
Der Benutzer kann das Formularfeld auf jede beliebige Weise ausfüllen, solange es das Format einer gültigen US-Nummer hat. The following are examples of valid formats for US numbers (refer to the tests below for other variants):
|
||||
Der Benutzer kann das Formularfeld auf jede beliebige Weise ausfüllen, solange es das Format einer gültigen US-Nummer hat. Es folgen Beispiele für gültige US-Nummern-Formate (siehe Tests unten für weitere Varianten):
|
||||
|
||||
<blockquote>555-555-5555<br>(555)555-5555<br>(555) 555-5555<br>555 555 5555<br>5555555555<br>1 555 555 5555</blockquote>
|
||||
|
||||
For this challenge you will be presented with a string such as `800-692-7753` or `8oo-six427676;laskdjf`. Your job is to validate or reject the US phone number based on any combination of the formats provided above. Die Vorwahl ist erforderlich. If the country code is provided, you must confirm that the country code is `1`. Return `true` if the string is a valid US phone number; otherwise return `false`.
|
||||
In dieser Aufgabe wird dir ein String wie `800-692-7753` oder `8oo-six427676;laskdjf` übergeben. Du sollst eine US-Telefonnummer anhand von Kombinationen der oben genannten Formate entweder validieren oder als ungültig ablehnen. Die Vorwahl ist erforderlich. Wird dir ein Ländercode übergeben, musst du bestätigen, dass dieser `1` ist. Gebe `true` zurück, wenn der String eine gültige US-Telefonnummer ist, ansonsten `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`telephoneCheck("555-555-5555")` should return a boolean.
|
||||
`telephoneCheck("555-555-5555")` sollte einen Boolean zurückgeben.
|
||||
|
||||
```js
|
||||
assert(typeof telephoneCheck('555-555-5555') === 'boolean');
|
||||
@@ -30,19 +30,19 @@ assert(typeof telephoneCheck('555-555-5555') === 'boolean');
|
||||
assert(telephoneCheck('1 555-555-5555') === true);
|
||||
```
|
||||
|
||||
`telephoneCheck("1 (555) 555-5555")` should return `true`.
|
||||
`telephoneCheck("1 (555) 555-5555")` sollte `true` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('1 (555) 555-5555') === true);
|
||||
```
|
||||
|
||||
`telephoneCheck("5555555555")` should return `true`.
|
||||
`telephoneCheck("5555555555")` sollte `true` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('5555555555') === true);
|
||||
```
|
||||
|
||||
`telephoneCheck("555-555-5555")` should return `true`.
|
||||
`telephoneCheck("555-555-5555")` sollte `true` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('555-555-5555') === true);
|
||||
@@ -54,133 +54,133 @@ assert(telephoneCheck('555-555-5555') === true);
|
||||
assert(telephoneCheck('(555)555-5555') === true);
|
||||
```
|
||||
|
||||
`telephoneCheck("1(555)555-5555")` should return `true`.
|
||||
`telephoneCheck("1(555)555-5555")` sollte `true` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('1(555)555-5555') === true);
|
||||
```
|
||||
|
||||
`telephoneCheck("555-5555")` should return `false`.
|
||||
`telephoneCheck("555-5555")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('555-5555') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("5555555")` should return `false`.
|
||||
`telephoneCheck("5555555")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('5555555') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("1 555)555-5555")` should return `false`.
|
||||
`telephoneCheck("1 555)555-5555")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('1 555)555-5555') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("1 555 555 5555")` should return `true`.
|
||||
`telephoneCheck("1 555 555 5555")` sollte `true` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('1 555 555 5555') === true);
|
||||
```
|
||||
|
||||
`telephoneCheck("1 456 789 4444")` should return `true`.
|
||||
`telephoneCheck("1 456 789 4444")` sollte `true` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('1 456 789 4444') === true);
|
||||
```
|
||||
|
||||
`telephoneCheck("123**&!!asdf#")` should return `false`.
|
||||
`telephoneCheck("123**&!!asdf#")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('123**&!!asdf#') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("55555555")` should return `false`.
|
||||
`telephoneCheck("55555555")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('55555555') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("(6054756961)")` should return `false`.
|
||||
`telephoneCheck("(6054756961)")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('(6054756961)') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("2 (757) 622-7382")` should return `false`.
|
||||
`telephoneCheck("2 (757) 622-7382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('2 (757) 622-7382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("0 (757) 622-7382")` should return `false`.
|
||||
`telephoneCheck("0 (757) 622-7382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('0 (757) 622-7382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("-1 (757) 622-7382")` should return `false`.
|
||||
`telephoneCheck("-1 (757) 622-7382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('-1 (757) 622-7382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("2 757 622-7382")` should return `false`.
|
||||
`telephoneCheck("2 757 622-7382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('2 757 622-7382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("10 (757) 622-7382")` should return `false`.
|
||||
`telephoneCheck("10 (757) 622-7382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('10 (757) 622-7382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("27576227382")` should return `false`.
|
||||
`telephoneCheck("27576227382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('27576227382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("(275)76227382")` should return `false`.
|
||||
`telephoneCheck("(275)76227382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('(275)76227382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("2(757)6227382")` should return `false`.
|
||||
`telephoneCheck("2(757)6227382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('2(757)6227382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("2(757)622-7382")` should return `false`.
|
||||
`telephoneCheck("2(757)622-7382")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('2(757)622-7382') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("555)-555-5555")` should return `false`.
|
||||
`telephoneCheck("555)-555-5555")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('555)-555-5555') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("(555-555-5555")` should return `false`.
|
||||
`telephoneCheck("(555-555-5555")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('(555-555-5555') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("(555)5(55?)-5555")` should return `false`.
|
||||
`telephoneCheck("(555)5(55?)-5555")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('(555)5(55?)-5555') === false);
|
||||
```
|
||||
|
||||
`telephoneCheck("55 55-55-555-5")` should return `false`.
|
||||
`telephoneCheck("55 55-55-555-5")` sollte `false` zurückgeben.
|
||||
|
||||
```js
|
||||
assert(telephoneCheck('55 55-55-555-5') === false);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 635060a5c03c950f46174cb5
|
||||
title: Step 1
|
||||
title: Schritt 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
@@ -21,13 +21,13 @@ You should use the `const` keyword to declare a variable `calculate`.
|
||||
assert.match(code, /const\s*calculate/);
|
||||
```
|
||||
|
||||
Your `calculate` variable should be a function.
|
||||
Deine `calculate`-Variable sollte eine Funktion sein.
|
||||
|
||||
```js
|
||||
assert.isFunction(calculate);
|
||||
```
|
||||
|
||||
Your `calculate` function should be empty.
|
||||
Deine `calculate`-Funktion sollte leer sein.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /\{\s*\}/);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 63507b5ac8a55134223374c7
|
||||
title: Step 2
|
||||
title: Schritt 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
@@ -13,7 +13,7 @@ Store this in a `value` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `value` variable.
|
||||
Deine `calculate`-Funktion sollte eine `value`-Variable enthalten.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /value/);
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
---
|
||||
id: 63507bcbfe4ede356e624395
|
||||
title: Step 3
|
||||
title: Schritt 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have the value of the input, you need to split it into an array of numbers. Use the `.split()` method to do this.
|
||||
Nun, da du den Wert der Eingabe hast, musst du ihn in ein Array von Zahlen aufteilen. Verwende dazu die `.split()`-Methode.
|
||||
|
||||
The `.split()` method takes a string and splits it into an array of strings. You can pass it a string of characters or a RegEx to use as a separator. For example, `string.split(",")` would split the string at each comma and return an array of strings.
|
||||
Die `.split()`-Methode nimmt einen String und zerlegt ihn in einen Array von Strings. You can pass it a string of characters or a RegEx to use as a separator. Zum Beispiel würde `string.split(",")` den String an jedem Komma trennen und ein Array von Strings zurückgeben.
|
||||
|
||||
Use a regex to split the `value` string by commas followed by any number of spaces. Store the array in an `array` variable.
|
||||
Verwende einen regulären Ausdruck, um den `value`-String durch Kommas, gefolgt von einer beliebigen Anzahl von Leerzeichen, zu trennen. Speichere das Array in einer `array`-Vabriablen.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have an `array` variable.
|
||||
Deine `calculate`-Funktion sollte über eine `array`-Variable verfügen.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /array/);
|
||||
```
|
||||
|
||||
Your `calculate` function should call the `.split()` method on the `value` variable.
|
||||
Deine `calculate`-Funktion sollte die `.split()`-Methode für deine `value`-Variable aufrufen.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /value\.split()/);
|
||||
```
|
||||
|
||||
Your `calculate` function should assign the result of the `.split()` method to the `array` variable.
|
||||
Deine `calculate`-Funktion sollte der `array`-Variablen das Resultat der `.split()`-Methode zuweisen.
|
||||
|
||||
```js
|
||||
assert.match(code.toString(), /array\s*=\s*value\.split()/);
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
---
|
||||
id: 63507c19151201368ee3e16c
|
||||
title: Step 4
|
||||
title: Schritt 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The value of an input element is always a string, even if the input type is `number`. You need to convert this array of strings into an array of numbers. To do this, you can use the `.map()` method.
|
||||
Der Wert eines Eingabeelements ist immer ein String, auch wenn der Eingabetyp `number` ist. You need to convert this array of strings into an array of numbers. To do this, you can use the `.map()` method.
|
||||
|
||||
Create a `numbers` variable and assign it the value of `array.map()`. Remember that `.map()` creates a new array, instead of mutating the original array.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculate` function should have a `numbers` variable.
|
||||
Deine `calculate`-Funktion sollte eine `numbers`-Variable enthalten.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers/);
|
||||
@@ -25,7 +25,7 @@ You should use the `.map()` method on your `array` variable.
|
||||
assert.match(calculate.toString(), /array\.map\(\)/);
|
||||
```
|
||||
|
||||
You should assign the result of your `.map()` call to your `numbers` variable.
|
||||
Du solltest deiner `numbers`-Variable das Ergebnis deines `.map()`-Aufrufs zuweisen.
|
||||
|
||||
```js
|
||||
assert.match(calculate.toString(), /numbers\s*=\s*array.map()/);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user