mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-09 19:00:53 -04:00
chore(i18n,learn): processed translations (#50582)
This commit is contained in:
camperbot
@@ -61,80 +61,53 @@ console.log(novel.writer);
|
||||
يجب أن يكون `Thermostat` بنوع `class` مع طريقة `constructor` محددة.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
يجب استخدام كلمة `class`.
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` يجب أن يتم انشاء مثيل له.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
عند إنشاء مثيل بقيمة فهرنهايت، يجب أن يضبط `Thermostat` درجة الحرارة الصحيحة `temperature`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
يجب تعريف `getter`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
يجب تعريف `setter`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
استدعاء `setter` مع قيمة مئوية يجب أن تحدد `temperature`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -61,80 +61,53 @@ console.log(novel.writer);
|
||||
`Thermostat` 應該是一個具有 `constructor` 方法的 `class`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
應該使用 `class` 關鍵詞。
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` 應該可以被實例化。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
當實例化華氏溫度值時，`Thermostat` 應該被設置爲正確的 `temperature`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
應該定義一個 `getter`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
應該定義一個 `setter`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
調用帶有攝氏溫度值的 `setter` 應該設置 `temperature`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -61,80 +61,53 @@ console.log(novel.writer);
|
||||
`Thermostat` 应该是一个具有 `constructor` 方法的 `class`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
应该使用 `class` 关键词。
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` 应该可以被实例化。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
当实例化华氏温度值时，`Thermostat` 应该被设置为正确的 `temperature`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
应该定义一个 `getter`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
应该定义一个 `setter`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
调用带有摄氏温度值的 `setter` 应该设置 `temperature`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -61,80 +61,53 @@ En otras palabras, estás abstrayendo los detalles de la implementación del usu
|
||||
`Thermostat` debe ser una `class` con un método `constructor` definido.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
La palabra clave `class` debe ser utilizada.
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` debe ser capaz de ser instanciado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
Cuando se crea una instancia con un valor de Fahrenheit, `Thermostat` debe establecer la temperatura (`temperature`) correcta.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
Un `getter` debe ser definido.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
Un `setter` debe ser definido.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
Llamar al `setter` con un valor Celsius debe establecer `temperature`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -61,80 +61,53 @@ Mit anderen Worten: Du abstrahierst die Implementierungsdetails vom Benutzer.
|
||||
`Thermostat` sollte eine `class` mit einer definierten `constructor`-Methode sein.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
Das Schlüsselwort `class` sollte verwendet werden.
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` sollte instanziiert werden können.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
Wenn du mit einem Fahrenheit-Wert instanziiert wirst, sollte `Thermostat` die richtige Temperatur (`temperature`) einstellen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
Es sollte ein `getter` definiert werden.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
Es sollte ein `setter` definiert werden.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
Der Aufruf des `setter` mit einem Celsius-Wert sollte die Temperatur (`temperature`) einstellen.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-87
|
||||
|
||||
# --description--
|
||||
|
||||
As you can see, you added a simple red shadow around your marker that's 5 pixels to the right, and 5 pixels down.
|
||||
Wie du sehen kannst, hast du einen einfachen roten Schatten um deine Markierung herum hinzugefügt, der 5 Pixel nach rechts und 5 Pixel nach unten reicht.
|
||||
|
||||
But what if you wanted to position your shadow on the opposite side? Du kannst dies tun, indem du negative Werte für `offsetX` und `offsetY` verwendest.
|
||||
Was aber, wenn du deinen Schatten auf der gegenüberliegenden Seite positionieren möchtest? Du kannst dies tun, indem du negative Werte für `offsetX` und `offsetY` verwendest.
|
||||
|
||||
Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, and `offsetY` to `-5px`.
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ Du solltest ein `h1`-Element erstellen.
|
||||
assert.exists(document.querySelector('h1'));
|
||||
```
|
||||
|
||||
Your `h1` element should come after your `img` element.
|
||||
Dein `h1`-Element sollte nach deinem `img`-Element stehen.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-27
|
||||
|
||||
# --description--
|
||||
|
||||
Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
|
||||
Positioniere die Sonne in der oberen rechten Ecke des Bildschirms, so dass `75px` ihres oberen und rechten Rands außerhalb des Bildschirms liegen.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-31
|
||||
|
||||
# --description--
|
||||
|
||||
_Most_ penguins do not have a square head.
|
||||
Die _meisten_ Pinguine haben keinen quadratischen Kopf.
|
||||
|
||||
Gib dem Pinguin einen leicht ovalen Kopf, indem du den Radius der oberen Ecken auf `70%` und den Radius der unteren Ecken auf `65%` einstellst.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
|
||||
Du solltest `.penguin-head` eine `border-radius` mit dem Wert `70% 70% 65% 65%` zuweisen.
|
||||
|
||||
```js
|
||||
// Maybe check for individual border-radius properties?
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-85
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
Du solltest `.foot` eine `z-index`-Eigenschaft mit dem Wert `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
|
||||
|
||||
@@ -11,13 +11,13 @@ Normalisiere deine Seite, indem du `width` auf `100%`, und `height` auf `100vh`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
Du solltest `body` eine `width` mit dem Wert `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
Du solltest `body` eine `height` mit dem Wert `--fcc-expected--` zuweisen, aber es wurde `--fcc-actual--` gefunden.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-50
|
||||
|
||||
# --description--
|
||||
|
||||
Erstelle eine neue Variable in `:root` namens `window-color2` mit einem Wert von `#8cd9b3`. This will be used as the secondary color for this building.
|
||||
Erstelle eine neue Variable in `:root` namens `window-color2` mit einem Wert von `#8cd9b3`. Dies wird als Sekundärfarbe für dieses Gebäude verwendet.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,7 +17,7 @@ Du solltest innerhalb `:root` eine neue Eigenschaftsvariable namens `window-colo
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
|
||||
```
|
||||
|
||||
You should give `window-color2` a value of `#8cd9b3`.
|
||||
Du solltest `window-color2` den Wert `#8cd9b3` zuweisen.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-115
|
||||
|
||||
Kopiere und füge deine ganze `sky`-Klasse zusammen mit allen Eigenschaften und Werten in die Media Query ein. Du wirst ein anderes Farbschema für die Silhouette erstellen, welche sie von Tag zu Nacht ändert.
|
||||
|
||||
Note: You are going to need to scroll past the editable region to copy the class.
|
||||
Notiz: Du musst hinter den editierbaren Bereich scrollen, um die Klasse zu kopieren.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ Dein Kommentar sollte mit `-->` enden. Es fehlen ein oder mehrere Zeichen, die
|
||||
assert(code.match(/-->/));
|
||||
```
|
||||
|
||||
Your code should not have extra opening/closing comment characters. Dir wird ein zusätziches `<!--` oder `-->` im Browser angezeigt.
|
||||
Dein Code sollte keine zusätzlichen öffnenden/abschließenden Kommentarzeichen enthalten. Dir wird ein zusätziches `<!--` oder `-->` im Browser angezeigt.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
|
||||
@@ -13,7 +13,7 @@ Füge nach dem `figure`-Element ein weiteres `h3`-Element mit dem folgenden Text
|
||||
|
||||
# --hints--
|
||||
|
||||
Es sollte ein `h3`-Element direkt über dem schließenden Tag des zweiten `section`-Elements geben. Make sure it has an opening and closing tag.
|
||||
Es sollte ein `h3`-Element direkt über dem schließenden Tag des zweiten `section`-Elements geben. Stelle sicher, dass es ein öffnendes und abschließendes Tag enthält.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
Placeholder text is used to give people a hint about what kind of information to enter into an input. For example, `<input type="text" placeholder="Email address">`.
|
||||
Platzhaltertext wird verwendet, um Personen einen Hinweis darauf zu geben, welche Art von Informationen sie in das Eingabefeld eintragen sollen. Zum Beispiel: `<input type="text" placeholder="Email address">`.
|
||||
|
||||
Add the placeholder text `cat photo URL` to your `input` element.
|
||||
|
||||
|
||||
@@ -25,14 +25,14 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Beide Radio-Buttons sollten ein `name`-Attribut enthalten. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
Beide Radio-Buttons sollten ein `name`-Attribut enthalten. Überprüfe, ob nach dem Namen des öffnenden Tags ein Leerzeichen steht und/oder ob vor allen Attributnamen Leerzeichen stehen.
|
||||
|
||||
```js
|
||||
const radioButtons = [...document.querySelectorAll('input[type="radio"]')];
|
||||
assert(radioButtons.every((btn) => btn.hasAttribute('name')));
|
||||
```
|
||||
|
||||
Beide Radio-Buttons sollten ein `type`-Attribut besitzen. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
Beide Radio-Buttons sollten ein `type`-Attribut besitzen. Überprüfe, ob nach dem Namen des öffnenden Tags ein Leerzeichen steht und/oder ob vor allen Attributnamen Leerzeichen stehen.
|
||||
|
||||
```js
|
||||
const radioButtons = [...document.querySelectorAll('input')];
|
||||
|
||||
@@ -53,13 +53,13 @@ Your new `input` should have a `type` attribute with the value `radio`.
|
||||
assert(document.querySelector('label input[id="outdoor"][type="radio"]'));
|
||||
```
|
||||
|
||||
You should not add any new elements other than an `input` nested in a `label`.
|
||||
Du solltest keine neuen Elemente außer einem `input`-Element hinzufügen, das in einem `label`-Element eingebettet ist.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('label input[id="outdoor"]:only-child'));
|
||||
```
|
||||
|
||||
There should be no text to the left of your new `input`.
|
||||
Links neben deinem neuen `input`-Element sollte kein Text stehen.
|
||||
|
||||
```js
|
||||
const outdoorBtn = document.querySelector('label input[id="outdoor"]');
|
||||
|
||||
@@ -37,7 +37,7 @@ Dein `legend`-Element sollte ein schließendes Tag haben. Schließende Tags habe
|
||||
assert(code.match(/<\/legend\>/g).length === 2);
|
||||
```
|
||||
|
||||
Das `legend`-Element sollte den Text `What's your cat's personality?` enthalten. You have either omitted the text or have a typo.
|
||||
Das `legend`-Element sollte den Text `What's your cat's personality?` enthalten. Du hast entweder den Text weggelassen oder dir ist ein Tippfehler unterlaufen.
|
||||
|
||||
```js
|
||||
const secondFieldset = $('fieldset')[1];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
Das ist besser. Now, make the background easy on the eyes, by changing the `body` `background-color` to `#1b1b32`. Ändere dann, um den Text zu sehen, die `color` auf `#f5f6f7`.
|
||||
Das ist besser. Gestalte jetzt den Hintergrund optisch ansprechend, indem du die `body` `background-color` auf `#1b1b32` setzt. Ändere dann, um den Text zu sehen, die `color` auf `#f5f6f7`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Certain `type` attribute values come with built-in form validation. Zum Beispiel erfordert `type="email"`, dass der Wert eine gültige E-Mail-Adresse ist.
|
||||
Bestimmte `type`-Attributwerte besitzen eine eingebaute Formularprüfung. Zum Beispiel erfordert `type="email"`, dass der Wert eine gültige E-Mail-Adresse ist.
|
||||
|
||||
Add custom validation to the password `input` element, by adding a `minlength` attribute with a value of `8`. Doing so prevents inputs of less than 8 characters being submitted.
|
||||
Add custom validation to the password `input` element, by adding a `minlength` attribute with a value of `8`. Dadurch wird verhindert, dass Eingaben mit weniger als 8 Zeichen übermittelt werden.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the password `input` element a `minlength` attribute.
|
||||
Du solltest dem `input`-Passwort-Element ein `minlength`-Attribut zuweisen.
|
||||
|
||||
```js
|
||||
assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-28
|
||||
|
||||
# --description--
|
||||
|
||||
You only want one radio input to be selectable at a time. However, the form does not know the radio inputs are related.
|
||||
Es soll jeweils nur eine Radio-Input-Element gleichzeitig wählbar sein. Allerdings weiß das Formular nicht, dass die Radio-Input-Elemente miteinander verbunden sind.
|
||||
|
||||
To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time.
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ Du solltest dem `label`-Element den Text `Provide a bio:` zuweisen.
|
||||
assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')?.innerText, /Provide a bio/);
|
||||
```
|
||||
|
||||
You should nest a `textarea` element within the `label`.
|
||||
Du solltest ein `textarea`-Element innerhalb des `label`-Elements einbetten.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea'));
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-60
|
||||
|
||||
# --description--
|
||||
|
||||
Lastly, for the submit button, you want to separate it from the `fieldset` above, and adjust its width to never be below `300px`.
|
||||
Zum Schluss möchtest du den Bestätigungsbutton vom darüber liegenden `fieldset`-Element trennen und dessen Breite so anpassen, dass diese niemals unter `300px` liegt.
|
||||
|
||||
Ändere die `margin`-Eigenschaft, um `1em` oben und unten hinzuzufügen, während du die Margin-Eigenschaft rechts und links auf `auto` eingestellt lässt. Stelle dann die Breite wie oben beschrieben ein.
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ Your `tr` element should have a `td` element as the first child.
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
|
||||
```
|
||||
|
||||
Your `tr` element should have three `th` elements, after the `td` element.
|
||||
Dein `tr`-Element sollte nach dem `td`-Element drei `th`-Elemente enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-21
|
||||
|
||||
Within the first `tr`, add a `th` element with the text `Loans The outstanding balance on our startup loan.`. Wrap that text, except for `Loans`, within a `span` element with the `class` set to `description`.
|
||||
|
||||
Add three `td` elements below that, and give them the following text, in order: `$500`, `$250`, and `$0`. Gib den drei `td`-Elementen eine `class`, die auf `current` eingestellt ist.
|
||||
Füge drei `td`-Elemente darunter hinzu und gib ihnen den folgenden Text in dieser Reihenfolge: `$500`, `$250` und `$0`. Gib den drei `td`-Elementen eine `class`, die auf `current` eingestellt ist.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -55,7 +55,7 @@ Dein zweites `td`-Element sollte den Text `$250` enthalten.
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
|
||||
```
|
||||
|
||||
Your third `td` element should have the text `$0`.
|
||||
Dein drittes `td`-Element sollte den Text `$0` enthalten.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
Beginne mit der grundlegenden HTML-Struktur. Add a `DOCTYPE` declaration and `html`, `head`, `body`, and `title` elements.
|
||||
Beginne mit der grundlegenden HTML-Struktur. Füge eine `DOCTYPE`-Deklaration sowie `html`-, `head`-, `body`- und `title`-Elemente hinzu.
|
||||
|
||||
Set the language of this page to English. Setze den `title` auf `Piano`.
|
||||
|
||||
@@ -49,7 +49,7 @@ Dein `html`-Element sollte ein schließendes Tag haben.
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Your `DOCTYPE` declaration should be at the beginning of your HTML.
|
||||
Deine `DOCTYPE`-Deklaration sollte am Anfang deines HTML-Codes stehen.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
@@ -97,7 +97,7 @@ Das `body`-Element sollte sich innerhalb des `html`-Elements befinden.
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
Dein Code sollte ein `title`-Element enthalten.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-15
|
||||
|
||||
# --description--
|
||||
|
||||
Use margins to adjust the spacing outside of an element.
|
||||
Verwende Margins, um den Abstand außerhab eines Elements anzupassen.
|
||||
|
||||
Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. Dies wird den Rahmen um 20 Pixel nach unten verschieben und horizontal auf der Seite zentrieren.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-37
|
||||
|
||||
Die Rechtecke sind zu klein und ihre Kanten haben keine weiche Qualität eines Bildes.
|
||||
|
||||
Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
|
||||
Vergrößere die Fläche und mache die Kanten von `.one` weicher, indem du dessen `box-shadow` auf `0 0 3px 3px #efb762` setzt.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-20
|
||||
|
||||
# --description--
|
||||
|
||||
Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
|
||||
Deine neue Klasse besitzt noch kein Styling. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold.
|
||||
|
||||
Fahre fort und entferne auch die `font-weight`-Eigenschaft aus deinem `h1`-Selektor.
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Die unteren Ränder unter deinen `% Daily Value *`- und `Saturated Fat 1g 5%`-El
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
|
||||
Dein `p`-Element mit dem Text `% Daily Value *` sollte `no-divider` zu dem `class`-Attribut hinzugefügt haben. Do not remove the existing classes.
|
||||
|
||||
```js
|
||||
const p = document.querySelector('.daily-value.small-text')?.firstElementChild;
|
||||
@@ -19,7 +19,7 @@ assert(p?.classList?.contains('no-divider'));
|
||||
assert(p?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes.
|
||||
Dein `p`-Element mit dem Text `Saturated Fat 1g 5%` sollte `no-divider` zum `class`-Attribut hinzugefügt haben. Do not remove the existing classes.
|
||||
|
||||
```js
|
||||
const p = document.querySelector('.daily-value.small-text')?.lastElementChild;
|
||||
|
||||
@@ -17,7 +17,7 @@ Du solltest ein neues `p`-Element am Ende deines `.daily-value`-Elements erstell
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Your new `p` element should have the `class` attribute set to `no-divider`.
|
||||
Dein neues `p`-Element sollte das `class`-Attribut auf `no-divider` gesetzt haben.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('no-divider'));
|
||||
|
||||
@@ -61,80 +61,53 @@ In altre parole, stai astraendo i dettagli di implementazione dall'utente.
|
||||
`Thermostat` dovrebbe essere una `class` con un metodo `constructor` definito.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
Dovrebbe essere usata la parola chiave `class`.
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` dovrebbe poter essere istanziato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
Quando istanziato con un valore in Fahrenheit, `Thermostat` dovrebbe impostare la `temperature` corretta.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
Dovrebbe essere definita una funzione `getter`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
Dovrebbe essere definita una funzione `setter`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
Chiamando il `setter` con un valore in Celsius dovrebbe essere impostata la `temperature`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -61,80 +61,53 @@ getter と setter を使用することで、 プログラマーが API の作
|
||||
`Thermostat` は、`constructor` メソッドを定義した `class` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
`class` キーワードを使用する必要があります。
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` をインスタンス化できるようにする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
華氏値でインスタンス化された場合、`Thermostat` は正しい `temperature` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
`getter` を定義する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
`setter` を定義する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
`setter` が摂氏値で呼び出されたとき、`temperature` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -61,80 +61,53 @@ Em outras palavras, você está abstraindo detalhes de implementação do usuár
|
||||
`Thermostat` deve ser uma `class` com um método `constructor` definido.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
A palavra-chave `class` deve ser usado.
|
||||
A palavra-chave `class` deve ser usada.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` deve ser possível de ser instanciado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
Quando instanciado com um valor Fahrenheit, `Thermostat` deve definir a `temperature` correta.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
Um `getter` deve ser definido.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
Um `setter` deve ser definido.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
Chamando um `setter` com um valor Celsius deve definir a `temperature`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -7,25 +7,25 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
|
||||
O elemento `input` precisa de alguns atributos adicionais. Dê a ele um `type` definido como `number` para que permita apenas entradas numéricas, um atributo `min` definido como `0` para que permita apenas números positivos e um `placeholder` definido como `Daily calorie budget`.
|
||||
|
||||
Finally, mark the `input` element as `required`.
|
||||
Por fim, marque o elemento `input` como `required` (obrigatório).
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `input` element should have a `type` attribute set to `number`.
|
||||
O elemento `input` deve ter o atributo `type` definido como `number`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('form input').type, 'number');
|
||||
```
|
||||
|
||||
Your `input` element should have a `min` attribute set to `0`.
|
||||
O elemento `input` deve ter o atributo `min` definido como `0`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('form input').min, '0');
|
||||
```
|
||||
|
||||
Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
|
||||
O elemento `input` deve ter o atributo `placeholder` definido como `Daily calorie budget`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
|
||||
|
||||
@@ -7,47 +7,47 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
Now create a `fieldset` with an `id` set to `lunch`, and a corresponding `legend` and `div` element.
|
||||
Agora, crie um `fieldset` com um `id` definido como `lunch` e elementos `legend` e `div` correspondentes.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a second `fieldset` element in your `form`.
|
||||
Você deve criar um segundo elemento `fieldset` no `form`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('form fieldset')[1]);
|
||||
```
|
||||
|
||||
Your second `fieldset` element should come after your first `fieldset` element.
|
||||
O segundo elemento `fieldset` deve vir depois do primeiro elemento `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form fieldset')[1]?.previousElementSibling?.tagName, "FIELDSET");
|
||||
```
|
||||
|
||||
Your second `fieldset` element should have an `id` set to `lunch`.
|
||||
O segundo elemento `fieldset` deve ter o atributo `id` definido como `lunch`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form fieldset')[1]?.id, "lunch");
|
||||
```
|
||||
|
||||
Your second `fieldset` element should contain a `legend` element.
|
||||
O segundo elemento `fieldset` deve conter um elemento `legend`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('form fieldset')[1]?.querySelector('legend'));
|
||||
```
|
||||
|
||||
Your new `legend` element should have the text `Lunch`.
|
||||
O novo elemento `legend` deve conter o texto `Lunch`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form fieldset')[1]?.querySelector('legend')?.innerText, "Lunch");
|
||||
```
|
||||
|
||||
Your second `fieldset` element should contain a `div` element.
|
||||
O segundo elemento `fieldset` deve conter um elemento `div`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('form fieldset')[1]?.querySelector('div'));
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` set to `input-container`.
|
||||
O novo elemento `div` deve ter uma `class` definida como `input-container`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form fieldset')[1]?.querySelector('div')?.className, "input-container");
|
||||
|
||||
@@ -7,73 +7,73 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
In your `span` element, create a `label` element for an `entry-dropdown` and give it the text `Add food or exercise:`. Then create a `select` element with the `id` set to `entry-dropdown` and a `name` set to `options`. Below that, add a `button` element with the `id` set to `add-entry` and the text `Add Entry`.
|
||||
No elemento `span`, crie um elemento `label` para um `entry-dropdown` e dê a ele o texto `Add food or exercise:`. Em seguida, crie um elemento `select` com `id` definido como `entry-dropdown` e um `name` definido como `options`. Abaixo disso, adicione um elemento `button` com o `id` definido como `add-entry` e o texto `Add Entry`.
|
||||
|
||||
Give your `button` element a `type` attribute set to `button` to prevent automatic form submission.
|
||||
Dê ao elemento `button` um atributo `type` definido como `button` para evitar o envio automático do formulário.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `label` element to your `span` element.
|
||||
Você deve adicionar um elemento `label` ao elemento `span`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.controls > span > label'));
|
||||
```
|
||||
|
||||
Your new `label` element should have a `for` attribute set to `entry-dropdown`.
|
||||
O novo elemento `label` deve ter o atributo `for` definido como `entry-dropdown`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.controls > span > label')?.getAttribute('for'), 'entry-dropdown');
|
||||
```
|
||||
|
||||
Your new `label` element should have the text `Add food or exercise:`.
|
||||
O novo elemento `label` deve ter o texto `Add food or exercise:`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.controls > span > label')?.innerText, 'Add food or exercise:');
|
||||
```
|
||||
|
||||
You should add a `select` element to your `span` element.
|
||||
Você deve adicionar um elemento `select` ao elemento `span`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.controls > span > select'));
|
||||
```
|
||||
|
||||
Your `select` element should come after your `label` element.
|
||||
O elemento `select` deve vir depois do elemento `label`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.controls > span > select')?.previousElementSibling?.tagName === 'LABEL');
|
||||
```
|
||||
|
||||
Your new `select` element should have an `id` attribute set to `entry-dropdown`.
|
||||
O novo elemento `select` deve ter o atributo `id` definido como `entry-dropdown`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.controls > span > select')?.getAttribute('id'), 'entry-dropdown');
|
||||
```
|
||||
|
||||
Your new `select` element should have a `name` attribute set to `options`.
|
||||
O novo elemento `select` deve ter o atributo `name` definido como `options`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.controls > span > select')?.getAttribute('name'), 'options');
|
||||
```
|
||||
|
||||
You should add a `button` element to your `span` element.
|
||||
Você deve adicionar um elemento `button` ao elemento `span`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.controls > span > button'));
|
||||
```
|
||||
|
||||
Your `button` element should come after your `select` element.
|
||||
O elemento `button` deve vir depois do elemento `select`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.controls > span > button')?.previousElementSibling?.tagName === 'SELECT');
|
||||
```
|
||||
|
||||
Your new `button` element should have an `id` attribute set to `add-entry`.
|
||||
O novo elemento `button` deve ter um atributo `id` definido como `add-entry`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.controls > span > button')?.getAttribute('id'), 'add-entry');
|
||||
```
|
||||
|
||||
Your new `button` element should have the text `Add Entry`.
|
||||
O novo elemento `button` dever ter o texto `Add Entry`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.controls > span > button')?.innerText, 'Add Entry');
|
||||
|
||||
@@ -7,79 +7,79 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
Your select menu needs options for each of the food and exercise `fieldset` elements you created in the previous steps. Use the `option` element to create a new option for each `fieldset`. The `value` attribute of each option should be the `id` of the `fieldset`, and the text of each option should be the text of the `legend`.
|
||||
O menu de seleção precisa de opções para cada um dos elementos `fieldset` de alimentos e exercícios que você criou nos passos anteriores. Use o elemento `option` para criar uma opção para cada `fieldset`. O atributo `value` de cada opção deve ser o `id` do `fieldset`. O texto de cada opção deve ser o texto de `legend`.
|
||||
|
||||
Set the `Breakfast` option as the `selected` option.
|
||||
Defina a opção `Breakfast` como a opção `selected`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create five `option` elements within your `select` element.
|
||||
Você deve criar cinco elementos `option` dentro do elemento `select`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.length, 5);
|
||||
```
|
||||
|
||||
Your first `option` should have the text `Breakfast`.
|
||||
O primeiro `option` deve ter o texto `Breakfast`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[0]?.textContent, 'Breakfast');
|
||||
```
|
||||
|
||||
Your first `option` should have the `value` attribute set to `breakfast`.
|
||||
O primeiro `option` deve ter o atributo `value` definido como `breakfast`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[0]?.value, 'breakfast');
|
||||
```
|
||||
|
||||
Your second `option` should have the text `Lunch`.
|
||||
O segundo `option` deve ter o texto `Lunch`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[1]?.textContent, 'Lunch');
|
||||
```
|
||||
|
||||
Your second `option` should have the `value` attribute set to `lunch`.
|
||||
O segundo `option` deve ter o atributo `value` definido como `lunch`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[1]?.value, 'lunch');
|
||||
```
|
||||
|
||||
Your third `option` should have the text `Dinner`.
|
||||
O terceiro `option` deve ter o texto `Dinner`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[2]?.textContent, 'Dinner');
|
||||
```
|
||||
|
||||
Your third `option` should have the `value` attribute set to `dinner`.
|
||||
O terceiro `option` deve ter o atributo `value` definido como `dinner`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[2]?.value, 'dinner');
|
||||
```
|
||||
|
||||
Your fourth `option` should have the text `Snacks`.
|
||||
O quarto `option` deve ter o texto `Snacks`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[3]?.textContent, 'Snacks');
|
||||
```
|
||||
|
||||
Your fourth `option` should have the `value` attribute set to `snacks`.
|
||||
O quarto `option` deve ter o atributo `value` definido como `snacks`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[3]?.value, 'snacks');
|
||||
```
|
||||
|
||||
Your fifth `option` should have the text `Exercise`.
|
||||
O quinto `option` deve ter o texto `Exercise`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[4]?.textContent, 'Exercise');
|
||||
```
|
||||
|
||||
Your fifth `option` should have the `value` attribute set to `exercise`.
|
||||
O quinto `option` deve ter o atributo `value` definido como `exercise`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.controls select option')?.[4]?.value, 'exercise');
|
||||
```
|
||||
|
||||
Your first `option` should be selected by default.
|
||||
O primeiro `option` deve ser selecionado por padrão.
|
||||
|
||||
```js
|
||||
assert.isTrue(document.querySelectorAll('.controls select option')?.[0]?.getAttributeNames()?.includes('selected'));
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-11
|
||||
|
||||
# --description--
|
||||
|
||||
Create another `div` element. Within it, nest a `button` to `submit` the form, with an `id` set to `calculate-calories`. This button should have the text `Calculate Remaining Calories`.
|
||||
Crie outro elemento `div`. Dentro dele, coloque um `button` para fazer o `submit` (envio) do formulário, com um `id` definido como `calculate-calories`. Esse botão deve ter o texto `Calculate Remaining Calories`.
|
||||
|
||||
Then add a `button` with the `id` set to `clear` to clear the form (don't forget to give it a `type` attribute that prevents it from submitting the form). This button needs the text `Clear`.
|
||||
Em seguida, adicione um `button` com o `id` definido como `clear` para limpar o formulário (não se esqueça de dar a ele um atributo `type`, que o impeça de enviar o formulário). Esse botão precisa do texto `Clear`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -19,49 +19,49 @@ Crie um segundo elemento `div`.
|
||||
assert.equal(document.querySelectorAll('form > div')?.length, 2);
|
||||
```
|
||||
|
||||
Your new `div` element should have a `button` element.
|
||||
O novo elemento `div` deve ter um elemento `button`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('form > div')?.[1]?.querySelector('button'));
|
||||
```
|
||||
|
||||
Your `button` element should have a `type` attribute set to `submit`.
|
||||
O elemento `button` deve ter o atributo `type` com o valor `submit`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelector('button')?.getAttribute('type'), 'submit');
|
||||
```
|
||||
|
||||
Your `button` element should have an `id` attribute set to `calculate-calories`.
|
||||
O elemento `button` deve ter o atributo `id` definido como `calculate-calories`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelector('button')?.getAttribute('id'), 'calculate-calories');
|
||||
```
|
||||
|
||||
Your `button` element should have the text `Calculate Remaining Calories`.
|
||||
O elemento `button` dever ter o texto `Calculate Remaining Calories`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelector('button')?.innerText, 'Calculate Remaining Calories');
|
||||
```
|
||||
|
||||
Your `div` element should have a second `button` element.
|
||||
O elemento `div` deve ter um segundo elemento `button`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('button')?.[1]);
|
||||
```
|
||||
|
||||
Your second `button` element should have a `type` attribute set to `button`.
|
||||
O segundo elemento `button` deve ter o atributo `type` definido como `button`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('button')?.[1]?.getAttribute('type'), 'button');
|
||||
```
|
||||
|
||||
Your second `button` element should have an `id` attribute set to `clear`.
|
||||
O segundo elemento `button` deve ter um atributo `id` definido como `clear`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('button')?.[1]?.getAttribute('id'), 'clear');
|
||||
```
|
||||
|
||||
Your second `button` element should have the text `Clear`.
|
||||
O segundo elemento `button` deve ter o texto `Clear`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('button')?.[1]?.innerText, 'Clear');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-13
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
|
||||
Por fim, você precisa vincular o arquivo de JavaScript ao seu HTML. Crie um elemento `script` para fazer isso.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,7 +17,7 @@ Você deve ter apenas um elemento `script`.
|
||||
assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
|
||||
```
|
||||
|
||||
Your `script` element should have the `src` set to `./script.js`.
|
||||
O elemento `script` deve ter o `src` definido como `./script.js`.
|
||||
|
||||
```js
|
||||
assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
|
||||
|
||||
@@ -7,23 +7,23 @@ dashedName: step-14
|
||||
|
||||
# --description--
|
||||
|
||||
It is time to start writing the script that makes your form work. Begin by getting the `form` element (using the `id`) and storing it in a variable called `calorieCounter`.
|
||||
É hora de começar a escrever o script que faz o formulário funcionar. Comece obtendo o elemento `form` (usando o `id`) e armazenando-o em uma variável chamada `calorieCounter`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a variable called `calorieCounter`.
|
||||
Você deve criar uma variável chamada `calorieCounter`.
|
||||
|
||||
```js
|
||||
assert.isDefined(calorieCounter);
|
||||
```
|
||||
|
||||
You should use `document.getElementById()` to get the `#calorie-counter` element.
|
||||
Você deve usar `document.getElementById()` para obter o elemento `#calorie-counter`.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
|
||||
```
|
||||
|
||||
You should store the `#calorie-counter` element in a variable called `calorieCounter`.
|
||||
Você deve armazenar o elemento `#calorie-counter` em uma variável chamada `calorieCounter`.
|
||||
|
||||
```js
|
||||
assert.equal(calorieCounter, document.getElementById('calorie-counter'));
|
||||
|
||||
@@ -7,23 +7,23 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
|
||||
Declare uma variável `isError` e defina-a como `false`, mas use `let` para que você possa reatribuir seu valor mais tarde.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare an `isError` variable.
|
||||
Você deve declarar uma variável `isError`.
|
||||
|
||||
```js
|
||||
assert.isDefined(isError);
|
||||
```
|
||||
|
||||
Your `isError` variable should be set to `false`.
|
||||
A variável `isError` deve ser definida como `false`.
|
||||
|
||||
```js
|
||||
assert.isFalse(isError);
|
||||
```
|
||||
|
||||
You should use `let` to declare your `isError` variable.
|
||||
Você deve usar `let` para declarar a variável `isError`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+isError\s*=\s*false/g);
|
||||
|
||||
@@ -7,19 +7,19 @@ dashedName: step-19
|
||||
|
||||
# --description--
|
||||
|
||||
You need to split your `str` into individual characters. Remember that strings have a `.split()` method, and if you pass an empty string it will split on every character.
|
||||
Você precisa dividir `str` em caracteres individuais. Lembre-se de que as strings têm um método `.split()`. Se você passar para ele uma string vazia, elas serão divididas em cada caractere.
|
||||
|
||||
Declare a `strArray` variable and assign it that split value.
|
||||
Declare uma variável `strArray` e atribua a ela o valor de split.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `cleanInputString` function should declare a `strArray` variable.
|
||||
A função `cleanInputString` deve declarar uma variável `strArray`.
|
||||
|
||||
```js
|
||||
assert.match(cleanInputString.toString(), /strArray\s*=/);
|
||||
```
|
||||
|
||||
Your `strArray` variable should be assigned the value of `str.split('')`.
|
||||
A variável `strArray` deve receber por atribuição o valor de `str.split('')`.
|
||||
|
||||
```js
|
||||
assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\s*\)/);
|
||||
|
||||
@@ -7,32 +7,32 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Within your loop, you need to check if the character in `strArray` at index `i` is not `+`, `-`, or a space. If it is not, `push` it to the `cleanStrArray`.
|
||||
Dentro do laço, você precisa verificar se o caractere em `strArray` no índice `i` não é `+`, `-` ou um espaço. Se não for, faça o `push` do caractere (em outras palavras, insira-o) em `cleanStrArray`.
|
||||
|
||||
To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
|
||||
Para verificar o caractere, veja se o array `["+", "-", " "]` inclui o caractere – você pode usar o método `.includes()` no array para fazer isso.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `for` loop should have an `if` statement.
|
||||
O laço `for` deve ter uma instrução `if`.
|
||||
|
||||
```js
|
||||
assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
|
||||
```
|
||||
|
||||
Your `for` loop should use `!["+", "-", " "].includes()`.
|
||||
O laço `for` deve usar `!["+", "-", " "].includes()`.
|
||||
|
||||
```js
|
||||
// the loop protection injects code so we have to look at the raw code directly
|
||||
assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
|
||||
```
|
||||
|
||||
Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
|
||||
O laço `for` deve conferir se `strArray[i]` é encontrado em `["+", "-", " "]`.
|
||||
|
||||
```js
|
||||
assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
|
||||
```
|
||||
|
||||
Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
|
||||
O laço `for` deve fazer o `push` de `strArray[i]` (inseri-lo) em `cleanStrArray`.
|
||||
|
||||
```js
|
||||
assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\s*\}/);
|
||||
|
||||
@@ -7,43 +7,43 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
|
||||
Embora percorrer a string funcione, a criação de um array é ineficiente para o desempenho de memória e do tempo de execução. Em vez disso, você pode usar Expressões Regulares (também conhecidas como "regex") para fazer a correspondência a caracteres específicos.
|
||||
|
||||
Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
|
||||
Regex em JavaScript são indicadas por um padrão encapsulado em barras para frente – por exemplo:
|
||||
|
||||
```js
|
||||
const regex = /hello/;
|
||||
```
|
||||
|
||||
Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
|
||||
Remova o código existente dentro da função `cleanInputString`. Declare uma variável `regex` e atribua a ela o valor a partir do exemplo acima.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `cleanStrArray` variable.
|
||||
Você deve remover a variável `cleanStrArray`.
|
||||
|
||||
```js
|
||||
assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
|
||||
```
|
||||
|
||||
You should remove the `strArray` variable.
|
||||
Você deve remover a variável `strArray`.
|
||||
|
||||
```js
|
||||
assert.notMatch(cleanInputString.toString(), /strArray/);
|
||||
```
|
||||
|
||||
You should not have a `for` loop.
|
||||
Você não deve ter um laço `for`.
|
||||
|
||||
```js
|
||||
assert.notMatch(cleanInputString.toString(), /for/);
|
||||
```
|
||||
|
||||
You should declare a `regex` variable.
|
||||
Você deve declarar uma variável `regex`.
|
||||
|
||||
```js
|
||||
assert.match(cleanInputString.toString(), /regex\s*=/);
|
||||
```
|
||||
|
||||
Your `regex` variable should be set to the regular expression `/hello/`.
|
||||
A variável `regex` deve ser definida como a expressão regular `/hello/`.
|
||||
|
||||
```js
|
||||
assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-24
|
||||
|
||||
# --description--
|
||||
|
||||
The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
|
||||
O padrão que você tem atualmente corresponderá exatamente ao texto `hello`, que não é a correspondência que você deseja ter. Você quer procurar por `+`, `-` ou espaços. Substitua o padrão na variável `regex` por `\+-` para procurar os caracteres dos sinais de mais e de menos.
|
||||
|
||||
Note that you need to use the `\` to <dfn>escape</dfn> the `+`, because a `+` has a special meaning in regular expressions.
|
||||
Observe que você precisa usar `\` para <dfn>escapar</dfn> o `+`, porque `+` tem um significado especial em expressões regulares.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `regex` variable should be set to the regular expression `/\+-/`.
|
||||
A variável `regex` deve ser definida como a expressão regular `/\+-/`.
|
||||
|
||||
```js
|
||||
assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\//);
|
||||
|
||||
@@ -7,25 +7,25 @@ dashedName: step-37
|
||||
|
||||
# --description--
|
||||
|
||||
You'll need to know which category the entry goes in. Thankfully, you added a dropdown for the user to select a category.
|
||||
Você precisará saber em qual categoria a entrada se encaixa. Felizmente, você adicionou uma lista suspensa para o usuário selecionar uma categoria.
|
||||
|
||||
Remember that you queried that dropdown earlier in your JavaScript and assigned it to the `entryDropdown` button. Use concatenation to add `#` to the beginning of the `value` property of `entryDropdown`, and assign that result to a `targetId` variable.
|
||||
Lembre-se de que você já consultou a lista suspensa antes no JavaScript e a atribuiu ao botão `entryDropdown`. Use a concatenação para adicionar `#` ao início da propriedade `value` de `entryDropdown` e atribua esse resultado à variável `targetId`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `addEntry` function should have a `targetId` variable.
|
||||
A função `addEntry` deve ter uma variável `targetId`.
|
||||
|
||||
```js
|
||||
assert.match(addEntry.toString(), /targetId\s*=/);
|
||||
```
|
||||
|
||||
Your `targetId` variable should start with the string `#`.
|
||||
A variável `targetId` deve começar com a string `#`.
|
||||
|
||||
```js
|
||||
assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
|
||||
```
|
||||
|
||||
You should use concatenation to add `entryDropdown.value` after your `#` string.
|
||||
Você deve usar a concatenação para adicionar `entryDropdown.value` após a string `#`.
|
||||
|
||||
```js
|
||||
assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
|
||||
Agora, você precisa criar a string HTML dinâmica para adicionar à página da web. Declare uma nova variável `HTMLString` e atribua a ela uma string vazia de template literals.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `addEntry` function should have an `HTMLString` variable.
|
||||
A função `addEntry` deve ter uma variável `HTMLString`.
|
||||
|
||||
```js
|
||||
assert.match(addEntry.toString(), /HTMLString\s*=/)
|
||||
```
|
||||
|
||||
Your `HTMLString` should be an empty template literal.
|
||||
`HTMLString` deve ser uma template literal vazia.
|
||||
|
||||
```js
|
||||
assert.match(code, /HTMLString\s*=\s*``/);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-47
|
||||
|
||||
# --description--
|
||||
|
||||
Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
|
||||
Crie outro elemento `label` (em uma nova linha) no final de `HTMLString`. Esse `label` deve ter o texto `Entry # Calories`, usando a sintaxe de template literals para substituir `#` pelo valor de `entryNumber`, bem como o atributo `for` definido como `X-#-calories`, onde `X` é o `value` (valor) de `entryDropdown` e `#` é o valor de `entryNumber`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-51
|
||||
|
||||
# --description--
|
||||
|
||||
Try adding a couple of entries to the `Breakfast` category, and you may notice some bugs! The first thing we need to fix is the entry counts – the first entry should have a count of `1`, not `0`.
|
||||
Tente adicionar algumas entradas à categoria `Breakfast`. Você poderá notar alguns erros! A primeira coisa que precisamos corrigir é a contagem de entradas – a primeira entrada deve ter uma contagem de `1`, não `0`.
|
||||
|
||||
This bug occurs because you are querying for `input[type="text"]` elements *before* adding the new entry to the page. To fix this, update your `entryNumber` variable to be the value of the `length` of the query plus `1`. Add this on your declaration line, not in your template strings.
|
||||
Este bug ocorre porque você está consultando elementos `input[type="text"]` *antes de* adicionar a nova entrada à página. Para corrigir isso, atualize a variável `entryNumber` para que seja o valor de `length` da consulta mais `1`. Adicione isso à linha da declaração, não às strings de template literals.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add `1` to the `.length` of your `querySelectorAll()` method.
|
||||
Você deve adicionar `1` a `.length` do método `querySelectorAll()`.
|
||||
|
||||
```js
|
||||
assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.querySelectorAll\(\s*'input\[type="text"]'\)\.length\s*\+\s*1/)
|
||||
|
||||
@@ -7,27 +7,27 @@ dashedName: step-54
|
||||
|
||||
# --description--
|
||||
|
||||
Great! Now you can add entries without losing your previous inputs.
|
||||
Ótimo! Agora, você pode adicionar entradas sem perder os inputs anteriores.
|
||||
|
||||
Your next step is to write a function that will get the calorie counts from the user's entries.
|
||||
O próximo passo é escrever uma função que obterá a contagem de calorias a partir das entradas do usuário.
|
||||
|
||||
Declare a `getCaloriesFromInputs` function, and give it a parameter called `list`.
|
||||
Declare uma função `getCaloriesFromInputs` e dê a ela um parâmetro chamado `list`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `getCaloriesFromInputs` variable.
|
||||
Você deve declarar uma variável `getCaloriesFromInputs`.
|
||||
|
||||
```js
|
||||
assert.isDefined(getCaloriesFromInputs);
|
||||
```
|
||||
|
||||
Your `getCaloriesFromInputs` variable should be a function.
|
||||
A variável `getCaloriesFromInputs` deve ser uma função.
|
||||
|
||||
```js
|
||||
assert.isFunction(getCaloriesFromInputs);
|
||||
```
|
||||
|
||||
Your `getCaloriesFromInputs` function should take a parameter called `list`.
|
||||
A função `getCaloriesFromInputs` deve receber um parâmetro chamado `list`.
|
||||
|
||||
```js
|
||||
assert.match(getCaloriesFromInputs?.toString(), /\(\s*list\s*\)/);
|
||||
|
||||
@@ -7,25 +7,25 @@ dashedName: step-58
|
||||
|
||||
# --description--
|
||||
|
||||
Remember that you wrote a function earlier to clean the user's input? You'll need to use that function here.
|
||||
Você se lembra de ter escrito uma função antes para limpar a entrada do usuário? Você precisará usar essa função aqui.
|
||||
|
||||
Update your `currVal` declaration to be the result of calling `cleanInputString` with `list[i].value`.
|
||||
Atualize a declaração de `currVal` para que seja o resultado da chamada de `cleanInputString` com `list[i].value`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `getCaloriesFromInputs` function should call your `cleanInputString` function.
|
||||
A função `getCaloriesFromInputs` deve chamar a função `cleanInputString`.
|
||||
|
||||
```js
|
||||
assert.match(getCaloriesFromInputs.toString(), /cleanInputString\(/);
|
||||
```
|
||||
|
||||
You should pass `list[i].value` as the parameter for `cleanInputString`.
|
||||
Você deve passar `list[i].value` como o parâmetro para `cleanInputString`.
|
||||
|
||||
```js
|
||||
assert.match(getCaloriesFromInputs.toString(), /cleanInputString\(\s*list\[i\]\.value\)/);
|
||||
```
|
||||
|
||||
You should assign the result of your `cleanInputString` call to your `currVal` variable.
|
||||
Você deve atribuir o resultado da chamada de `cleanInputString` à variável `currVal`.
|
||||
|
||||
```js
|
||||
assert.match(getCaloriesFromInputs.toString(), /currVal\s*=\s*cleanInputString\(\s*list\[i\]\.value\)/);
|
||||
|
||||
@@ -7,17 +7,17 @@ dashedName: step-62
|
||||
|
||||
# --description--
|
||||
|
||||
Still within your `if` block, set `isError` to `true` and return `null`.
|
||||
Ainda dentro do bloco do `if`, defina `isError` como `true` e retorne `null`.
|
||||
|
||||
# --hints--
|
||||
|
||||
After your `alert`, you should set `isError` to `true`.
|
||||
Após o `alert`, você deve definir `isError` para `true`.
|
||||
|
||||
```js
|
||||
assert.match(code.split("function getCaloriesFromInputs")[1], /alert\(`Invalid Input: \${invalidInputMatch\[0\]}`\s*\);\s*isError\s*=\s*true/);
|
||||
```
|
||||
|
||||
After you modify `isError`, you should `return` the value `null`.
|
||||
Após modificar `isError`, você deve usar `return` para retornar o valor `null`.
|
||||
|
||||
```js
|
||||
assert.match(code.split("function getCaloriesFromInputs")[1], /alert\(`Invalid Input: \${invalidInputMatch\[0\]}`\s*\);\s*isError\s*=\s*true;?\s*return\s+null;?\s*\}/);
|
||||
|
||||
@@ -7,31 +7,31 @@ dashedName: step-63
|
||||
|
||||
# --description--
|
||||
|
||||
Remember that `return` ends the execution of a function. After your `if` block, you need to handle the logic for when the input is valid. Because your `if` statement returns a value, you do not need an `else` statement.
|
||||
Lembre-se de que `return` termina a execução de uma função. Após o bloco de `if`, você precisa tratar da lógica para quando a entrada for válida. Como a instrução `if` retorna um valor, você não precisa de uma instrução `else`.
|
||||
|
||||
Use the addition assignment operator to add `currVal` to your `calories` total. You'll need to use the `Number` constructor to convert `currVal` to a number.
|
||||
Use o operador de atribuição de adição para adicionar `currVal` ao total de `calories`. Você precisará usar o construtor `Number` para converter `currVal` em um número.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not add an `else` statement.
|
||||
Você não deve adicionar uma instrução `else`.
|
||||
|
||||
```js
|
||||
assert.notMatch(getCaloriesFromInputs.toString(), /else/);
|
||||
```
|
||||
|
||||
After your `if` statement, you should use the addition assignment operator on `calories`.
|
||||
Após a instrução `if`, você deve usar o operador de atribuição de adição em `calories`.
|
||||
|
||||
```js
|
||||
assert.match(getCaloriesFromInputs.toString(), /if.*}\s*calories\s*\+=/s);
|
||||
```
|
||||
|
||||
You should pass `currVal` to the `Number()` constructor.
|
||||
Você deve passar `currVal` para o construtor `Number()`.
|
||||
|
||||
```js
|
||||
assert.match(getCaloriesFromInputs.toString(), /Number\(\s*currVal\s*\)/);
|
||||
```
|
||||
|
||||
You should add the value of `Number(currVal)` to `calories`.
|
||||
Você deve adicionar o valor de `Number(currVal)` a `calories`.
|
||||
|
||||
```js
|
||||
assert.match(getCaloriesFromInputs.toString(), /calories\s*\+=\s*Number\(\s*currVal\s*\)/);
|
||||
|
||||
@@ -7,19 +7,19 @@ dashedName: step-66
|
||||
|
||||
# --description--
|
||||
|
||||
You will be attaching this function to the `submit` event of the form. The `submit` event is triggered when the form is submitted. The default action of the `submit` event is to reload the page. You need to prevent this default action using the `preventDefault()` method of your `e` parameter.
|
||||
Você vai anexar essa função ao evento `submit` do formulário. O evento `submit` é acionado quando o formulário é enviado. A ação padrão do evento `submit` é recarregar a página. Você precisa evitar essa ação padrão usando o método `preventDefault()` do parâmetro `e`.
|
||||
|
||||
Add a line to your `calculateCalories` function that calls the `preventDefault()` method on the `e` parameter. Then, reset your global error flag to `false`.
|
||||
Adicione uma linha à função `calculateCalories` que chame o método `preventDefault()` no parâmetro `e`. Em seguida, redefina sua falg de erro global como `false`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculateCalories` function should call `e.preventDefault()`.
|
||||
A função `calculateCalories` deve chamar `e.preventDefault()`.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /e\.preventDefault\(\)/);
|
||||
```
|
||||
|
||||
Your `calculateCalories` function should reset the global error flag to `false`.
|
||||
A função `calculateCalories` deve redefinir a flag de erro global como `false`.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /isError\s*=\s*false/);
|
||||
|
||||
@@ -7,23 +7,23 @@ dashedName: step-68
|
||||
|
||||
# --description--
|
||||
|
||||
Using that same syntax, query your `number` inputs in the `#lunch` element and assign them to `lunchNumberInputs`.
|
||||
Usando essa mesma sintaxe, consulte os inputs do tipo `number` no elemento `#lunch` e atribua-os a `lunchNumberInputs`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `lunchNumberInputs` variable.
|
||||
Você deve declarar uma variável `lunchNumberInputs`.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /lunchNumberInputs\s*=/);
|
||||
```
|
||||
|
||||
You should call `document.querySelectorAll()` with `#lunch input[type=number]`.
|
||||
Você deve chamar `document.querySelectorAll()` com `#lunch input[type=number]`.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /document\.querySelectorAll\(('|")#lunch input\[type=number\]\1\)/);
|
||||
```
|
||||
|
||||
You should assign the result of your `document.querySelectorAll()` call to `lunchNumberInputs`.
|
||||
Você deve atribuir o resultado da chamada de `document.querySelectorAll()` a `lunchNumberInputs`.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /lunchNumberInputs\s*=\s*document\.querySelectorAll\(('|")#lunch input\[type=number\]\1\)/);
|
||||
|
||||
@@ -7,27 +7,27 @@ dashedName: step-73
|
||||
|
||||
# --description--
|
||||
|
||||
You also need to get the value of your `#budget` input. You already queried this at the top of your code, and set it to the `budgetNumberInput` variable. However, you used `getElementById`, which returns an `Element`, not a `NodeList`.
|
||||
Você também precisa obter o valor do input `#budget`. Você já o consultou no início do código e o colocou na variável `budgetNumberInput`. No entanto, você usou `getElementById`, que retorna um `Element`, não uma `NodeList`.
|
||||
|
||||
A `NodeList` is an array-like, which means you can iterate through it and it shares some common methods with an array. For your `getCaloriesFromInputs` function, an array will work for the argument just as well as a `NodeList` does.
|
||||
Uma `NodeList` é um tipo de array, o que significa que você pode percorrê-la e que ela compartilha alguns métodos comuns com um array. Para a função `getCaloriesFromInputs`, tanto um array quanto uma `NodeList` funcionarão como argumento.
|
||||
|
||||
Declare a `budgetCalories` variable and set it to the result of calling `getCaloriesFromInputs` – pass an array containing your `budgetNumberInput` as the argument.
|
||||
Declare uma variável `budgetCalories` e atribua a ela o resultado da chamada de `getCaloriesFromInputs` – passe um array contendo `budgetNumberInput` como o argumento.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculateCalories` function should have a `budgetCalories` variable.
|
||||
A função `calculateCalories` deve ter uma variável `budgetCalories`.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /budgetCalories\s*=/);
|
||||
```
|
||||
|
||||
You should call `getCaloriesFromInputs` with `[budgetNumberInput]` as the argument.
|
||||
Você deve chamar `getCaloriesFromInputs` com `[budgetNumberInput]` como o argumento.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /getCaloriesFromInputs\s*\(\s*\[\s*budgetNumberInput\s*\]\s*\)/);
|
||||
```
|
||||
|
||||
You should assign the result of `getCaloriesFromInputs` to `budgetCalories`.
|
||||
Você deve atribuir o resultado de `getCaloriesFromInputs` a `budgetCalories`.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /budgetCalories\s*=\s*getCaloriesFromInputs\s*\(\s*\[\s*budgetNumberInput\s*\]\s*\)/);
|
||||
|
||||
@@ -7,23 +7,23 @@ dashedName: step-74
|
||||
|
||||
# --description--
|
||||
|
||||
Your `getCaloriesFromInputs` function will set the global error flag to `true` if an invalid input is detected. Add an `if` statement to your `calculateCalories` function that checks the truthiness of your global error flag, and if it is truthy then use `return` to end the function execution.
|
||||
A função `getCaloriesFromInputs` definirá a flag de erro global como `true` se uma entrada inválida for detectada. Adicione uma instrução `if` na função `calculateCalories` que verifique se a flag de erro global é considerada verdadeira. Se for, use `return` para terminar a execução da função.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `calculateCalories` function should have an `if` statement.
|
||||
A função `calculateCalories` deve ter uma instrução `if`.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /if\s*\(/);
|
||||
```
|
||||
|
||||
Your `if` statement should check the truthiness of the `isError` variable.
|
||||
A instrução `if` deve verificar se a variável `isError` é considerada verdadeira.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)/);
|
||||
```
|
||||
|
||||
Your `if` statement should use `return` to end the function execution.
|
||||
A instrução `if` deve usar `return` para terminar a execução da função.
|
||||
|
||||
```js
|
||||
assert.match(calculateCalories.toString(), /if\s*\(\s*isError\s*\)\s*\{?\s*return;?\s*\}?\s*/);
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-80
|
||||
|
||||
# --description--
|
||||
|
||||
Give your span the text `remainingCalories Calorie surplusOrDeficit`, using interpolation to replace `remainingCalories` and `surplusOrDeficit` with the appropriate variables.
|
||||
Dê ao span o texto `remainingCalories Calorie surplusOrDeficit`, usando a interpolação para substituir `remainingCalories` e `surplusOrDeficit` pelas variáveis apropriadas.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span` should have the text `${remainingCalories} Calorie ${surplusOrDeficit}`.
|
||||
O `span` deve ter o texto `${remainingCalories} Calorie ${surplusOrDeficit}`.
|
||||
|
||||
```js
|
||||
const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
|
||||
|
||||
@@ -7,27 +7,27 @@ dashedName: step-82
|
||||
|
||||
# --description--
|
||||
|
||||
After your `span` element, add an `hr` element to create a horizontal line.
|
||||
Após o elemento `span`, adicione um elemento `hr` para criar uma linha horizontal.
|
||||
|
||||
To keep your code clean and readable, you should add this on a new line in the template literal.
|
||||
Para manter seu código limpo e legível, você deve adicionar isso a uma nova linha no template literal.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `hr` element to your `output.innerHTML` string.
|
||||
Você deve adicionar um elemento `hr` à string `output.innerHTML`.
|
||||
|
||||
```js
|
||||
const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
|
||||
assert.match(htmlString, /<hr\s*\/?>/);
|
||||
```
|
||||
|
||||
Your `hr` element should come after your `span` element.
|
||||
O elemento `hr` deve vir depois do elemento `span`.
|
||||
|
||||
```js
|
||||
const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
|
||||
assert.isAbove(htmlString.indexOf('<hr'), htmlString.indexOf('<span'));
|
||||
```
|
||||
|
||||
Your `hr` element should be on a new line.
|
||||
O elemento `hr` deve estar em uma nova linha.
|
||||
|
||||
```js
|
||||
const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
|
||||
|
||||
@@ -7,34 +7,34 @@ dashedName: step-83
|
||||
|
||||
# --description--
|
||||
|
||||
Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
|
||||
Agora, crie um elemento `p` com o texto `budgetCalories Calories Budgeted`, usando interpolação para substituir `budgetCalories` pela variável apropriada.
|
||||
|
||||
This should come after your `hr` element.
|
||||
Isso deve vir após o elemento `hr`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `p` element.
|
||||
Você deve criar um elemento `p`.
|
||||
|
||||
```js
|
||||
const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
|
||||
assert.match(htmlString, /<p>/);
|
||||
```
|
||||
|
||||
Your `p` element should come after your `hr` element.
|
||||
O elemento `p` deve vir depois do elemento `hr`.
|
||||
|
||||
```js
|
||||
const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
|
||||
assert.isAbove(htmlString.indexOf('<p'), htmlString.indexOf('<hr'));
|
||||
```
|
||||
|
||||
Your `p` element should be on a new line.
|
||||
O elemento `p` deve estar em uma nova linha.
|
||||
|
||||
```js
|
||||
const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
|
||||
assert.match(htmlString, /\n\s*<p/);
|
||||
```
|
||||
|
||||
Your `p` element should have the text `${budgetCalories} Calories Budgeted`.
|
||||
O elemento `p` deve ter o texto `${budgetCalories} Calories Budgeted`.
|
||||
|
||||
```js
|
||||
const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
|
||||
|
||||
@@ -7,25 +7,25 @@ dashedName: step-86
|
||||
|
||||
# --description--
|
||||
|
||||
If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
|
||||
Se você clicar no botão `Calculate Remaining Calories`, verá que nada acontece. Você ainda precisa montar o "ouvinte" de eventos.
|
||||
|
||||
Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
|
||||
Adicione um "ouvinte" de evento ao elemento `calorieCounter`. O tipo de evento deve ser `submit` e a função de callback deve ser `calculateCalories`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.addEventListener()` method of your `calorieCounter` element.
|
||||
Você deve chamar o método `.addEventListener()` no elemento `calorieCounter`.
|
||||
|
||||
```js
|
||||
assert.match(code, /calorieCounter\.addEventListener\(/);
|
||||
```
|
||||
|
||||
You should pass `submit` as the first argument to `.addEventListener()`.
|
||||
Você deve passar `submit` como o primeiro argumento para `.addEventListener()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
|
||||
```
|
||||
|
||||
You should pass `calculateCalories` as the second argument to `.addEventListener()`.
|
||||
Você deve passar `calculateCalories` como o segundo argumento para `.addEventListener()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\s*/);
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-90
|
||||
|
||||
# --description--
|
||||
|
||||
It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
|
||||
É a hora de criar outro laço de repetição. Use um laço `for` para percorrer o array `inputContainers`.
|
||||
|
||||
Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
|
||||
Dentro do laço, defina a propriedade `innerHTML` do elemento do índice atual como uma string vazia. Isso limpará todo o conteúdo daquele contêiner de inputs.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `clearForm` function should have a `for` loop.
|
||||
A função `clearForm` deve ter um laço `for`.
|
||||
|
||||
```js
|
||||
// loop protect injects stuff, so let's look at the raw code again
|
||||
@@ -21,14 +21,14 @@ const clearForm = code.split("function clearForm()")[1];
|
||||
assert.match(clearForm, /for\s*\(/);
|
||||
```
|
||||
|
||||
Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
|
||||
O laço `for` deve percorrer o array `inputContainers`. Lembre-se de usar `i` como seu iterador.
|
||||
|
||||
```js
|
||||
const clearForm = code.split("function clearForm()")[1];
|
||||
assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
|
||||
```
|
||||
|
||||
Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
|
||||
No laço `for`, você deve definir a propriedade `innerHTML` de `inputContainers[i]` como uma string vazia.
|
||||
|
||||
```js
|
||||
const clearForm = code.split("function clearForm()")[1];
|
||||
|
||||
@@ -7,23 +7,23 @@ dashedName: step-91
|
||||
|
||||
# --description--
|
||||
|
||||
After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
|
||||
Após a conclusão do laço, você precisa limpar `budgetNumberInput`. Defina a propriedade `value` de `budgetNumberInput` como uma string vazia.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
|
||||
A função `clearForm` deve acessar a propriedade `value` do elemento `budgetNumberInput`.
|
||||
|
||||
```js
|
||||
assert.match(clearForm.toString(), /budgetNumberInput\.value/);
|
||||
```
|
||||
|
||||
Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
|
||||
A função `clearForm` deve definir a propriedade `value` do elemento `budgetNumberInput` como uma string vazia.
|
||||
|
||||
```js
|
||||
assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
|
||||
```
|
||||
|
||||
You should modify the `budgetNumberInput` after your `for` loop.
|
||||
Você deve modificar o `budgetNumberInput` após o laço `for`.
|
||||
|
||||
```js
|
||||
const clearForm = code.split("function clearForm()")[1];
|
||||
|
||||
@@ -61,80 +61,53 @@ console.log(novel.writer);
|
||||
`Thermostat` повинен бути класом (`class`) із визначеним методом `constructor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof Thermostat === 'function' &&
|
||||
typeof Thermostat.constructor === 'function'
|
||||
);
|
||||
assert.isFunction(Thermostat);
|
||||
assert.isFunction(Thermostat?.constructor);
|
||||
```
|
||||
|
||||
Використайте ключове слово `class`.
|
||||
The `class` keyword should be used.
|
||||
|
||||
```js
|
||||
assert(code.match(/class/g));
|
||||
assert.match(code, /class/);
|
||||
```
|
||||
|
||||
`Thermostat` повинен бути реалізованим.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return typeof t === 'object';
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.isObject(_t);
|
||||
```
|
||||
|
||||
Коли значення за Фаренгейтом буде реалізоване, `Thermostat` повинен встановити правильну `temperature`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(122);
|
||||
return t.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(122);
|
||||
assert.strictEqual(_t?.temperature, 50);
|
||||
```
|
||||
|
||||
`getter` має бути визначеним.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.get === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.get);
|
||||
```
|
||||
|
||||
`setter` має бути визначеним.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const desc = Object.getOwnPropertyDescriptor(
|
||||
Thermostat.prototype,
|
||||
'temperature'
|
||||
);
|
||||
return !!desc && typeof desc.set === 'function';
|
||||
})()
|
||||
);
|
||||
const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');
|
||||
assert.isFunction(_desc?.set);
|
||||
```
|
||||
|
||||
Виклик `setter` зі значенням за Цельсієм має встановити `temperature`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
const t = new Thermostat(32);
|
||||
t.temperature = 26;
|
||||
const u = new Thermostat(32);
|
||||
u.temperature = 50;
|
||||
return t.temperature === 26 && u.temperature === 50;
|
||||
})()
|
||||
);
|
||||
const _t = new Thermostat(32);
|
||||
_t.temperature = 26;
|
||||
const _u = new Thermostat(32);
|
||||
_u.temperature = 50;
|
||||
assert.approximately(_t.temperature, 26, 0.1);
|
||||
assert.approximately(_u.temperature, 50, 0.1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
Reference in New Issue
Block a user