mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-06 10:00:53 -04:00
chore(i18n,learn): processed translations (#47141)
This commit is contained in:
camperbot
@@ -182,21 +182,21 @@ const el = document.getElementById('number-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
`#name-label` が空でないようにしてください。
|
||||
`#name-label` には入力欄について説明するテキストを含める必要があります。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
`#email-label` が空でないようにしてください。
|
||||
`#email-label` には入力欄について説明するテキストを含める必要があります。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
`#number-label` が空でないようにしてください。
|
||||
`#number-label` には入力欄について説明するテキストを含める必要があります。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
|
||||
@@ -18,7 +18,7 @@ dashedName: build-a-tribute-page
|
||||
1. `#img-div` の要素内には、`id="image"` を持つ `img` 要素があります
|
||||
1. `#img-div` の要素内には、`id="img-caption"` を持つ要素があり、`#img-div` 内に表示されている画像を説明するテキストコンテンツを含みます
|
||||
1. `id="tribute-info"` を持つ要素が 1 つあり、これにはトリビュートページの対象者を説明するテキストコンテンツが含まれます
|
||||
1. `id="tribute-link"` を持つ a 要素が 1 つあり、これはトリビュートページの対象者に関する追加情報を含む外部サイトへのリンクです。 ヒント: リンクを新しいタブで開くためには、要素に `target` 属性を与え、その値に `_blank` を設定しなければなりません
|
||||
1. `id="tribute-link"` を持つ `a` 要素が 1 つあり、これはトリビュートページの対象者に関する追加情報を含む外部サイトへのリンクです。 ヒント: リンクを新しいタブで開くためには、要素に `target` 属性を与え、その値に `_blank` を設定しなければなりません
|
||||
1. `#image` に `max-width` と `height` プロパティを使用して、元のサイズを超えることなく、親要素の幅に応じてサイズが変更されるようにします
|
||||
1. `img` 要素は親要素内の中央に配置する必要があります
|
||||
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 5dc17dc8f86c76b9248c6eb5
|
||||
title: ステップ 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
コメントを使うと、ブラウザーの表示に影響を及ぼさずにメッセージを残すことができます。 また、コメントを使ってコードを非アクティブにすることも可能です。 HTML のコメントは `<!--` で始まり、テキストの行を囲み、`-->` で終了します。 例えば `<!-- TODO: Remove h1 -->` というコメントは、テキスト `TODO: Remove h1` を含んでいます。
|
||||
|
||||
`p` 要素の上に、次のテキストのコメントを追加してください:
|
||||
|
||||
`TODO: Add link to cat photos`
|
||||
|
||||
# --hints--
|
||||
|
||||
コメントは `<!--` で始める必要があります。 コメントの開始を定義する文字が 1 つ以上欠けています。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--/));
|
||||
```
|
||||
|
||||
コメントは `-->` で終わる必要があります。 コメントの終了を定義する文字が 1 つ以上欠けています。
|
||||
|
||||
```js
|
||||
assert(code.match(/-->/));
|
||||
```
|
||||
|
||||
コード内に余分なコメントを開始 / 終了する文字があってはいけません。 余分な `<!--` または `-->` がブラウザーに表示されています。
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
assert(noSpaces.match(/<!--/g).length < 2 && noSpaces.match(/-->/g).length < 2);
|
||||
```
|
||||
|
||||
コメントには `TODO: Add link to cat photos` というテキストを含めてください。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
|
||||
```
|
||||
|
||||
コメントが `p` 要素の上にあるようにしてください。 順番が誤っているようです。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code
|
||||
.replace(/\s/g, '')
|
||||
.match(
|
||||
/<!--todo:addlinktocatphotos--><p>clickheretoviewmorecatphotos\.?<\/p>/i
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
--fcc-editable-region--
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 5dc2385ff86c76b9248c6eb7
|
||||
title: ステップ 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 には、さまざまなコンテンツの領域を表す要素があります。 これらの要素によって HTML が読みやすくなり、検索エンジン最適化 (SEO) やアクセシビリティの向上に役立ちます。
|
||||
|
||||
このページのメインとなるセクションを表すため、`h1` 要素の後に開始タグ `<main>`、`p` 要素の後に終了タグ `</main>` を追加しましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`main` 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('main'));
|
||||
```
|
||||
|
||||
`main` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/main\>/));
|
||||
```
|
||||
|
||||
`main` 要素の開始タグは `h1` 要素の下に置く必要があります。 順番が誤っているようです。
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('main,h1')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('H1') < collection.indexOf('MAIN'));
|
||||
```
|
||||
|
||||
`main` 要素の開始タグは `h2` 要素の上に置く必要があります。 順番が誤っているようです。
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('main,h2')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('MAIN') < collection.indexOf('H2'));
|
||||
```
|
||||
|
||||
`main` 要素の終了タグは `p` 要素の下に置く必要があります。 順番が誤っているようです。
|
||||
|
||||
```js
|
||||
const mainNode = document.querySelector('main');
|
||||
const pNode = document.querySelector('p');
|
||||
assert(
|
||||
mainNode.contains(pNode) &&
|
||||
pNode.textContent.toLowerCase().match(/click here to view more cat photos/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер позбудьтеся горизонтальної смуги прокрутки, встановивши для `body` властивість `margin` за замовчуванням, який деякі браузери додають на `0`.
|
||||
Тепер позбудьтеся горизонтальної смуги прокрутки, встановивши для `body` властивість `margin` за замовчуванням, яку деякі браузери додають на `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-13
|
||||
|
||||
# --description--
|
||||
|
||||
Перший `fieldset` міститиме поля імені, електронної пошти та пароля. Почніть з додавання чотирьох елементів `label` до першого `fieldset`.
|
||||
Перший `fieldset` міститиме поля з іменем, електронною поштою та паролем. Почніть з додавання чотирьох елементів `label` до першого `fieldset`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 60f80e0081e0f2052ae5b505
|
||||
title: Крок 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Уточнення атрибута `type` елемента форми важливе для браузера, щоб знати, які дані йому варто очікувати. Якщо `type` не вказано, браузер за замовчуванням використовуватиме `text`.
|
||||
|
||||
Першим двом елементам `input` надайте атрибут `type` зі значенням `text`, третьому – атрибут `type` зі значенням `email`, четвертому – атрибут `type` зі значенням `password`.
|
||||
|
||||
Тип `email` дозволяє лише електронні адреси, що мають `@` та `.` в домені. Тип `password` приховує введення та попереджає, якщо сайт не використовує HTTPS.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати першому елементу `input` атрибут `type` зі значенням `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input')?.type, 'text');
|
||||
```
|
||||
|
||||
Ви повинні надати другому елементу `input` атрибут `type` зі значенням `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text');
|
||||
```
|
||||
|
||||
Ви повинні надати третьому елементу `input` атрибут `type` зі значенням `email`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email');
|
||||
```
|
||||
|
||||
Ви повинні надати четвертому елементу `input` атрибут `type` зі значенням `password`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input /></label>
|
||||
<label>Enter Your Last Name: <input /></label>
|
||||
<label>Enter Your Email: <input /></label>
|
||||
<label>Create a New Password: <input /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 60f81167d0d4910809f88945
|
||||
title: Крок 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Перший елемент `input`, що має `type` зі значенням `submit`, автоматично встановлений для відправки свого найближчого батьківського елемента `form`.
|
||||
|
||||
Щоб обробити відправку форми, після останнього елемента `fieldset` додайте елемент `input` з атрибутом `type` зі значенням `submit` та атрибут `value` зі значенням `Submit`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати елемент `input` після останнього елемента `fieldset`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input');
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `input` атрибут `type` зі значенням `submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset + input[type="submit"]'));
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `input` атрибут `value` зі значенням `Submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset + input[value="Submit"]'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" /></label>
|
||||
<label>Enter Your Last Name: <input type="text" /></label>
|
||||
<label>Enter Your Email: <input type="email" /></label>
|
||||
<label>Create a New Password: <input type="password" /></label>
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 60f81616cff80508badf9ad5
|
||||
title: Крок 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
На цьому етапі ви зможете надіслати форму. Однак ви можете помітити, що майже нічого не відбувається.
|
||||
|
||||
Щоб зробити форму більш інтерактивною, додайте атрибут `required` до елементів `input` в першому `fieldset`.
|
||||
|
||||
Тепер, якщо ви спробуєте надіслати форму, не заповнивши обов’язкові поля, ви побачите повідомлення про помилку.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати першому елементу `input` атрибут `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input')?.required, true);
|
||||
```
|
||||
|
||||
Ви повинні надати другому елементу `input` атрибут `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.required, true);
|
||||
```
|
||||
|
||||
Ви повинні надати третьому елементу `input` атрибут `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.required, true);
|
||||
```
|
||||
|
||||
Ви повинні надати четвертому елементу `input` атрибут `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[3]?.required, true);
|
||||
```
|
||||
|
||||
Ви не повинні надавати `submit` `input` атрибут `required`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="submit"]')?.required, false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" /></label>
|
||||
<label>Enter Your Last Name: <input type="text" /></label>
|
||||
<label>Enter Your Email: <input type="email" /></label>
|
||||
<label>Create a New Password: <input type="password" /></label>
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 60f83e7bfc09900959f41e20
|
||||
title: Крок 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Деякі значення атрибутів `type` мають вбудовану перевірку форми. Наприклад `type="email"` вимагає, щоб значення було дійсною електронною адресою.
|
||||
|
||||
Додайте спеціальну перевірку до елемента-пароля `input`, додавши атрибут `minlength` зі значенням `8`. Це запобігає надсиланню введених даних довжиною менше ніж 8 символів.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати елементу-паролю `input` атрибут `minlength`.
|
||||
|
||||
```js
|
||||
assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1);
|
||||
```
|
||||
|
||||
Ви повинні надати атрибуту `minlength` значення `8`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.minLength, 8);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 60f84ec41116b209c280ba91
|
||||
title: Крок 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
З допомогою `type="password"` ви можете використати атрибут `pattern` для встановлення регулярного виразу, якому повинен відповідати пароль, щоб вважатися дійсним.
|
||||
|
||||
Додайте атрибут `pattern` до елемента-пароля `input`, щоб відповідати певним умовам: `[a-z0-5]{8,}`
|
||||
|
||||
Вище наведено регулярний вираз, який відповідає восьми або більше малим літерам або цифрам від `0` до `5`. Потім видаліть атрибут `minlength` та спробуйте ще раз.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати елементу-паролю `input` атрибут `pattern`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern);
|
||||
```
|
||||
|
||||
Ви повинні надати атрибуту `pattern` значення `[a-z0-5]{8,}`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}');
|
||||
```
|
||||
|
||||
Ви повинні видалити атрибут `minlength` з елемента-пароля `input`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.minLength, -1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" minlength="8" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 60f8604682407e0d017bbf7f
|
||||
title: Крок 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Для правил та умов додайте `input`, що має `type` зі значенням `checkbox`, до третього елемента `label`. Оскільки ми не хочемо, щоб користувачі реєструвалися, не прочитавши правила та умови, зробіть його `required`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати `input` до третього елемента `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input'));
|
||||
```
|
||||
|
||||
Ви повинні додати атрибут `type` зі значенням `checkbox` до елемента `input`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox');
|
||||
```
|
||||
|
||||
Ви повинні додати атрибут `required` до елемента `input`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="radio" /></label>
|
||||
<label></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60fab4a123ce4b04526b082b
|
||||
title: Крок 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Потрібно, щоб одночасно можна було вибрати лише один перемикач. Однак форма не знає, що перемикачі пов’язані.
|
||||
|
||||
Щоб пов’язати перемикачі, надайте їм такий самий атрибут `name` зі значенням `account-type`. Тепер неможливо вибрати обидва перемикачі одночасно.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати першому перемикачу атрибут `name` зі значенням `account-type`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type');
|
||||
```
|
||||
|
||||
Ви повинні надати другому перемикачу атрибут `name` зі значенням `account-type`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type');
|
||||
```
|
||||
|
||||
Ви не повинні надавати `checkbox` атрибут `name`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /> Personal Account</label>
|
||||
<label><input type="radio" /> Business Account</label>
|
||||
<label><input type="checkbox" required /> I accept the terms and conditions</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 60fab8367d35de04e5cb7929
|
||||
title: Крок 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб завершити цей `fieldset`, прив’яжіть текст `terms and conditions` в третьому `label` до такого розташування:
|
||||
|
||||
```md
|
||||
https://www.freecodecamp.org/news/terms-of-service/
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати елемент `a`, щоб прив'язати правила та умови.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a'));
|
||||
```
|
||||
|
||||
Елементу `a` потрібно надати `href` зі значенням `https://www.freecodecamp.org/news/terms-of-service/`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/);
|
||||
```
|
||||
|
||||
Ви повинні обгорнути елемент `a` лише навколо тексту `terms and conditions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label><input type="checkbox" required /> I accept the terms and conditions</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 60fab9f17fa294054b74228c
|
||||
title: Крок 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Переходимо до останнього `fieldset`. Ви б хотіли дозволити користувачеві завантажувати фотографію профілю?
|
||||
|
||||
Що ж, `file` з типом `input` дозволяє саме це. Додайте `label` з текстом `Upload a profile picture:` та додайте `input`, що приймає завантаження файлу.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати `label` з текстом `Upload a profile picture:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i);
|
||||
```
|
||||
|
||||
Ви повинні вкласти елемент `input` в межах елемента `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label > input'));
|
||||
```
|
||||
|
||||
Елементу `input` потрібно надати `type` зі значенням `file`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the
|
||||
<a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 60fabf0dd4959805dbae09e6
|
||||
title: Крок 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте ще один `label` після першого, з текстом `Input your age (years):`. Потім вкладіть `input`, що має `type` зі значенням `number`.
|
||||
|
||||
Оскільки ми не хочемо, щоб реєструвалися користувачі віком до 13 років, додайте атрибут `min` до `input` зі значенням `13`. Крім того, ми можемо припустити, що користувачі старше 120 років не реєструватимуться; додайте атрибут `max` зі значенням `120`.
|
||||
|
||||
Тепер, якщо хтось спробує надіслати форму зі значеннями поза діапазоном, з’явиться попередження та форма не буде надіслана. Спробуйте.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати `label` до третього `fieldset`, після наявного `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label + label'));
|
||||
```
|
||||
|
||||
Ви повинні надати `label` текст `Input your age (years):`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):');
|
||||
```
|
||||
|
||||
Для `label` потрібно надати `input`, що має `type` зі значенням `number`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]'));
|
||||
```
|
||||
|
||||
Ви повинні надати `input` атрибут `min` зі значенням `13`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13');
|
||||
```
|
||||
|
||||
Ви повинні надати `input` атрибут `max` зі значенням `120`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 60fac4095512d3066053d73c
|
||||
title: Крок 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додати спадне віконце до форми легко з допомогою елемента `select`. Елемент `select` є контейнером для групи елементів `option`, а елемент `option` поводиться як мітка для кожної опції спадного віконця. Обидва елементи потребують кінцевих теґів.
|
||||
|
||||
Почніть з додавання елемента `select` під двома елементами `label`. Потім вкладіть 5 елементів `option` в межах елемента `select`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати елемент `select` до третього `fieldset`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > select'));
|
||||
```
|
||||
|
||||
Ви повинні вкласти 5 елементів `option` в межах елемента `select`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 60fac56271087806def55b33
|
||||
title: Крок 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вставте елемент `select` (з його елементами `option`) в елемент `label` з текстом `How did you hear about us?`. Текст повинен йти перед елементом `select`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні вкласти тільки елемент `select` в елемент `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select'));
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `label` текст `How did you hear about us?`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?');
|
||||
```
|
||||
|
||||
Ви повинні розмістити текст перед елементом `select`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.trim().replace(/[\t\n]+/g, ''), /^How did you hear about us\?/);
|
||||
```
|
||||
|
||||
Ви повинні мати 5 елементів `option` в межах елемента `select`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > label > select > option')?.length, 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<select>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
</select>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 60fac8d7fdfaee0796934f20
|
||||
title: Крок 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Спадні опції наразі порожні. Щоб надати їм вміст, додайте такий текст до кожного наступного елемента `option`:
|
||||
|
||||
```md
|
||||
(select one)
|
||||
freeCodeCamp News
|
||||
freeCodeCamp YouTube Channel
|
||||
freeCodeCamp Forum
|
||||
Other
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати першому елементу `option` текст `(select one)`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)');
|
||||
```
|
||||
|
||||
Ви повинні надати другому елементу `option` текст `freeCodeCamp News`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News');
|
||||
```
|
||||
|
||||
Ви повинні надати третьому елементу `option` текст `freeCodeCamp YouTube Channel`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel');
|
||||
```
|
||||
|
||||
Ви повинні надати четвертому елементу `option` текст `freeCodeCamp Forum`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum');
|
||||
```
|
||||
|
||||
Ви повинні надати п'ятому елементу `option` текст `Other`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 60faca286cb48b07f6482970
|
||||
title: Крок 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надсилання форми з вибраною опцією не відправлятиме придатне значення на сервер. Таким чином, кожному `option` потрібно надати атрибут `value`. Без цього текстовий вміст `option` буде надіслано на сервер.
|
||||
|
||||
Першому `option` надайте `value` зі значенням `""`, а наступним елементам `option` надайте атрибути `value` від `1` до `4`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Першому елементу `option` надайте `value` зі значенням `""`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, '');
|
||||
```
|
||||
|
||||
Другому елементу `option` надайте `value` зі значенням `1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1');
|
||||
```
|
||||
|
||||
Третьому елементу `option` надайте `value` зі значенням `2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2');
|
||||
```
|
||||
|
||||
Четвертому елементу `option` надайте `value` зі значенням `3`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3');
|
||||
```
|
||||
|
||||
П'ятому елементу `option` надайте `value` зі значенням `4`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option>(select one)</option>
|
||||
<option>freeCodeCamp News</option>
|
||||
<option>freeCodeCamp YouTube Channel</option>
|
||||
<option>freeCodeCamp Forum</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 60fad0a812d9890938524f50
|
||||
title: Крок 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб надати кемперам уявлення про те, що додати до своєї біографії, використайте атрибут `placeholder`. `placeholder` приймає текстове значення, яке зображається, доки користувач не почне вводити текст.
|
||||
|
||||
Для `textarea` надайте `placeholder` зі значенням `I like coding on the beach...`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `textarea` атрибут `placeholder`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder);
|
||||
```
|
||||
|
||||
Ви повинні надати `placeholder` значення `I like coding on the beach...`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea rows="3" cols="30"></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 60fad1cafcde010995e15306
|
||||
title: Крок 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Під час відправки форм краще надавати кожному елементу, який можна надсилати, атрибут `name`. Цей атрибут використовують для ідентифікації елемента в поданні форми.
|
||||
|
||||
Надайте кожному елементу, який можна подати, унікальний атрибут `name` за своїм вибором, окрім двох перемикачів.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `input`, який очікує ім'я, атрибут `name`. _P.S. я б обрав `first-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name);
|
||||
```
|
||||
|
||||
Ви повинні надати `input`, який очікує прізвище, атрибут `name`. _P.S. я б обрав `last-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name);
|
||||
```
|
||||
|
||||
Ви повинні надати `email` атрибут `name`. _P.S. я б обрав `email`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="email"]')?.name);
|
||||
```
|
||||
|
||||
Ви повинні надати `password` атрибут `name`. _P.S. я б обрав `password`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="password"]')?.name);
|
||||
```
|
||||
|
||||
Ви повинні надати `checkbox` атрибут `name`. _P.S. я б обрав `terms`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name);
|
||||
```
|
||||
|
||||
Ви повинні надати `file` атрибут `name`. _P.S. я б обрав `file`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="file"]')?.name);
|
||||
```
|
||||
|
||||
Ви повинні надати `number` атрибут `name`. _P.S. я б обрав `age`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="number"]')?.name);
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `select` атрибут `name`. _P.S. я б обрав `referrer`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('select')?.name);
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `textarea` атрибут `name`. _P.S. я б обрав `bio`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('textarea')?.name);
|
||||
```
|
||||
|
||||
Ви не повинні надавати жодному з елементів `option` атрибут `name`.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name));
|
||||
```
|
||||
|
||||
Ви не повинні надавати жодному з елементів `label` атрибут `name`.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name));
|
||||
```
|
||||
|
||||
Ви не повинні надавати жодному з елементів `fieldset` атрибут `name`.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 60fad6dfcc0d930a59becf12
|
||||
title: Крок 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML для реєстраційної форми завершено. Тепер ви можете його трохи прикрасити.
|
||||
|
||||
Почніть зі зміни шрифту на `Tahoma` та розміру шрифту на `16px` в `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати властивість `font-family`, щоб змінити шрифт.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily);
|
||||
```
|
||||
|
||||
Ви повинні встановити властивість `font-family` на `Tahoma`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma');
|
||||
```
|
||||
|
||||
Ви повинні встановити властивість `font-size` на `16px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 60fad8e6148f310bba7890b1
|
||||
title: Крок 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зцентруйте елементи `h1` та `p`, надавши їм `margin` зі значенням `1em auto`. Потім вирівняйте їх текст за `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати селектор елементів, розділений комами, для стилізації елементів `h1` та `p`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p'));
|
||||
```
|
||||
|
||||
Ви повинні використати `margin` зі значенням `1em auto`, щоб зцентрувати елементи `h1` та `p`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto');
|
||||
```
|
||||
|
||||
Ви повинні використати `text-align` зі значенням `center`, щоб зцентрувати текст `h1` та `p`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 60fad99e09f9d30c1657e790
|
||||
title: Крок 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зцентруйте елемент `form`, надавши йому `margin` зі значенням `0 auto`. Потім виправте його розмір на максимальну ширину `500px` та мінімальну ширину `300px`. В межах цього діапазону дозвольте йому мати `width` зі значенням `60vw`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати селектор `form`, щоб стилізувати елемент `form`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('form'));
|
||||
```
|
||||
|
||||
Ви повинні надати `form` властивість `margin` зі значенням `0 auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto');
|
||||
```
|
||||
|
||||
Ви повинні надати `form` властивість `max-width` зі значенням `500px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px');
|
||||
```
|
||||
|
||||
Ви повинні надати `form` властивість `min-width` зі значенням `300px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px');
|
||||
```
|
||||
|
||||
Ви повинні надати `form` властивість `width` зі значенням `60vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 60fadb18058e950c73925279
|
||||
title: Крок 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Під час розробки корисно бачити краї `fieldset` за замовчуванням. Однак через них вміст виглядає надто розділеним.
|
||||
|
||||
Видаліть `border` та додайте відступ зі значенням `2rem` лише зверху та внизу кожного `fieldset`. Переконайтесь, що видалили `padding` зліва та справа.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви можете використати значення `none` або `0`, щоб видалити `border`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/);
|
||||
```
|
||||
|
||||
Ви повинні додати `padding` зі значенням `2rem` до верхньої та нижньої частини кожного `fieldset`.
|
||||
|
||||
```js
|
||||
const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
|
||||
assert.equal(fieldset?.paddingTop, '2rem');
|
||||
assert.equal(fieldset?.paddingBottom, '2rem');
|
||||
```
|
||||
|
||||
Ви повинні видалити `padding` зліва та справа від кожного `fieldset`.
|
||||
|
||||
```js
|
||||
const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
|
||||
assert.equal(fieldset?.paddingLeft, '0px');
|
||||
assert.equal(fieldset?.paddingRight, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 60fadce90f85c50d0bb0dd4f
|
||||
title: Крок 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб трохи відокремити елементи `fieldset`, виберіть їх та надайте `border-bottom` зі значенням `3px solid #3b3b4f`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати елементам `fieldset` властивість `border-bottom` зі значенням `3px solid #3b3b4f`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset')?.borderBottom, '3px solid rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 60fadd972e6ffe0d6858fa2d
|
||||
title: Крок 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Було б краще мати текст `label` над елементами форми.
|
||||
|
||||
Виберіть всі елементи `input`, `textarea` та `select` та зробіть так, щоб вони займали всю ширину своїх батьківських елементів.
|
||||
|
||||
Крім того, додайте `margin` зі значенням `10px` до верхньої частини вибраних елементів. Встановіть інші поля на `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати селектор елементів, розділений комами, щоб вибрати елементи `input`, `textarea` та `select`.
|
||||
|
||||
```js
|
||||
assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector)));
|
||||
```
|
||||
|
||||
Ви повинні встановити властивість `width` на `100%`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%');
|
||||
```
|
||||
|
||||
Ви повинні встановити властивість `margin-top` на `10px`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px');
|
||||
```
|
||||
|
||||
Ви повинні встановити властивість `margin-bottom` на `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px');
|
||||
```
|
||||
|
||||
Ви повинні встановити властивість `margin-left` на `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px');
|
||||
```
|
||||
|
||||
Ви повинні встановити властивість `margin-right` на `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -9,7 +9,7 @@ dashedName: step-45
|
||||
|
||||
Для другого `fieldset` потрібно, щоб текст `input` та `label` з’являвся в одному рядку.
|
||||
|
||||
Почніть з надання елементам `input` другого `fieldset` класу `inline`.
|
||||
Почніть з надання елементам `input` в другому `fieldset` класу `inline`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 60fc236dc04532052926fdac
|
||||
title: Крок 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Якщо уважно придивитись, ви помітите, що елементи `.inline` розташовані надто високо в рядку.
|
||||
|
||||
Щоб виправити це, встановіть властивість `vertical-align` на `middle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні встановити властивість `vertical-align` на `middle` для всіх елементів `.inline`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 60ffe1bc30415f042faea936
|
||||
title: Крок 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб змусити елементи `input` та `textarea` зливатися з фоновою темою, встановіть їхній `background-color` на `#0a0a23`. Потім надайте їм край `1px`, `solid` з кольором `#0a0a23`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати селектор елементів, розділений комами, щоб вибрати елементи `input` та `textarea`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc));
|
||||
```
|
||||
|
||||
Ви повинні надати елементам `input` та `textarea` властивість `background-color` зі значенням `#0a0a23`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
Ви повинні надати елементам `input` та `textarea` край `1px`, `solid` з кольором `#0a0a23`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px');
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid');
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 60ffe4f4ec18cd04dc470c56
|
||||
title: Крок 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Потрібно, щоб елемент `select` залишався з білим фоном, але тепер він не отримує такий самий `min-height`, як елементи `input` та `textarea`.
|
||||
|
||||
Перемістіть властивість `min-height` та її значення, щоб всі три типи елементів мали однакове значення `min-height`, а елемент `select` досі мав білий фон.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні перемістити властивість `min-height` та значення до селектора `input, textarea, select`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight);
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `input, textarea, select` властивість `min-height` зі значенням `2em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em');
|
||||
```
|
||||
|
||||
Ви повинні видалити декларацію `min-height` із селектора `input, textarea`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 60ffe7d8aae62c05bcc9e7eb
|
||||
title: Крок 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Завдяки `display` зі значенням `block` кнопка надсилання розташована на одному рівні з лівим краєм свого батьківського елемента.
|
||||
|
||||
Використайте таку ж саму техніку, що й для центрування `form`, щоб зцентрувати кнопку відправки.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати кнопці відправки `margin` зі значенням `0 auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto');
|
||||
```
|
||||
|
||||
Ви не повинні надавати кнопці відправки `min-width` або `max-width`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registration Form</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://register-demo.freecodecamp.org'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
fieldset:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -19,7 +19,7 @@ dashedName: step-59
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
|
||||
```
|
||||
|
||||
Елементу `a` надайте `color` зі значенням `#dfdfe2`.
|
||||
Елементу `a` потрібно надати `color` зі значенням `#dfdfe2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
|
||||
|
||||
@@ -0,0 +1,266 @@
|
||||
---
|
||||
id: 62019093fe30e278e797d2f6
|
||||
title: Крок 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Селектор `[attribute="value"]` націлює будь-який елемент, який має атрибут з певним значенням. Створіть селектор `tr[class="total"]`, щоб націлити конкретно свої елементи `tr` з класом `total`. Надайте йому нижній кордон `4px double #0a0a23` та зробіть шрифт жирним.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати селектор `tr[class="total"]`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
|
||||
```
|
||||
|
||||
Ваш селектор `tr[class="total"]` повинен мати властивість `border-bottom` зі значенням `4px double #0a0a23`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
Ваш селектор `tr[class="total"]` повинен мати властивість `font-weight` зі значенням `bold`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Balance Sheet</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,271 @@
|
||||
---
|
||||
id: 620191707bc65579ddd3ce15
|
||||
title: Крок 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Використовуючи той самий синтаксис селектора, націльте елементи `th` в рядках таблиці, де `total` `class`. Вирівняйте текст за лівим краєм та надайте йому відступ `0.5rem 0 0.25rem 0.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати селектор `tr[class="total"] th`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
|
||||
```
|
||||
|
||||
Ваш селектор `tr[class="total"] th` повинен мати властивість `text-align` зі значенням `left`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
|
||||
```
|
||||
|
||||
Ваш селектор `tr[class="total"] th` повинен мати властивість `padding` зі значенням `0.5rem 0 0.25rem 0.5rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Balance Sheet</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
<h1>
|
||||
<span class="flex">
|
||||
<span>AcmeWidgetCorp</span>
|
||||
<span>Balance Sheet</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div id="years" aria-hidden="true">
|
||||
<span class="year">2019</span>
|
||||
<span class="year">2020</span>
|
||||
<span class="year">2021</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<caption>Assets</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only year">2019</span></th>
|
||||
<th><span class="sr-only year">2020</span></th>
|
||||
<th class="current"><span class="sr-only year">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
|
||||
<td>$25</td>
|
||||
<td>$30</td>
|
||||
<td class="current">$28</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Checking <span class="description">Our primary transactional account.</span></th>
|
||||
<td>$54</td>
|
||||
<td>$56</td>
|
||||
<td class="current">$53</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$650</td>
|
||||
<td class="current">$728</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Assets</span></th>
|
||||
<td>$579</td>
|
||||
<td>$736</td>
|
||||
<td class="current">$809</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Liabilities</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="data">
|
||||
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
|
||||
<td>$500</td>
|
||||
<td>$250</td>
|
||||
<td class="current">$0</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
|
||||
<td>$200</td>
|
||||
<td>$300</td>
|
||||
<td class="current">$400</td>
|
||||
</tr>
|
||||
<tr class="data">
|
||||
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
|
||||
<td>$50</td>
|
||||
<td>$50</td>
|
||||
<td class="current">$75</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Liabilities</span></th>
|
||||
<td>$750</td>
|
||||
<td>$600</td>
|
||||
<td class="current">$475</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<caption>Net Worth</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th><span class="sr-only">2019</span></th>
|
||||
<th><span class="sr-only">2020</span></th>
|
||||
<th><span class="sr-only">2021</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="total">
|
||||
<th>Total <span class="sr-only">Net Worth</span></th>
|
||||
<td>$-171</td>
|
||||
<td>$136</td>
|
||||
<td class="current">$334</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
span[class~="sr-only"] {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #0a0a23;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 37.25rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
h1 .flex {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 .flex span:first-of-type {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
h1 .flex span:last-of-type {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
border: 2px solid #d0d0d5;
|
||||
}
|
||||
|
||||
#years {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #0a0a23;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
|
||||
margin: 0 -2px;
|
||||
}
|
||||
|
||||
#years span[class] {
|
||||
font-weight: bold;
|
||||
width: 4.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 0.75rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
table caption {
|
||||
color: #356eaf;
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
top: -2.25rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
width: 100vw;
|
||||
min-width: 4rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
width: calc(100% - 12rem);
|
||||
}
|
||||
|
||||
tr[class="total"] {
|
||||
border-bottom: 4px double #0a0a23;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
Reference in New Issue
Block a user