From 2bb7c9ca97dc8a0d2e978e326142b845e5a06a4e Mon Sep 17 00:00:00 2001 From: camperbot Date: Thu, 4 Aug 2022 02:31:45 +0100 Subject: [PATCH] chore(i18n,learn): processed translations (#47141) --- .../build-a-survey-form.md | 6 +- .../build-a-tribute-page.md | 2 +- .../5dc17dc8f86c76b9248c6eb5.md | 70 +++++ .../5dc2385ff86c76b9248c6eb7.md | 73 +++++ .../60f1a5e2d2c23707a4f9a660.md | 2 +- .../60f5d2776c854e069560fbe6.md | 2 +- .../60f80e0081e0f2052ae5b505.md | 87 ++++++ .../60f81167d0d4910809f88945.md | 80 ++++++ .../60f81616cff80508badf9ad5.md | 94 ++++++ .../60f83e7bfc09900959f41e20.md | 74 +++++ .../60f84ec41116b209c280ba91.md | 82 ++++++ .../60f8604682407e0d017bbf7f.md | 82 ++++++ .../60fab4a123ce4b04526b082b.md | 84 ++++++ .../60fab8367d35de04e5cb7929.md | 86 ++++++ .../60fab9f17fa294054b74228c.md | 89 ++++++ .../60fabf0dd4959805dbae09e6.md | 103 +++++++ .../60fac4095512d3066053d73c.md | 85 ++++++ .../60fac56271087806def55b33.md | 101 +++++++ .../60fac8d7fdfaee0796934f20.md | 117 ++++++++ .../60faca286cb48b07f6482970.md | 111 +++++++ .../60fad0a812d9890938524f50.md | 96 +++++++ .../60fad1cafcde010995e15306.md | 156 ++++++++++ .../60fad6dfcc0d930a59becf12.md | 103 +++++++ .../60fad8e6148f310bba7890b1.md | 104 +++++++ .../60fad99e09f9d30c1657e790.md | 121 ++++++++ .../60fadb18058e950c73925279.md | 122 ++++++++ .../60fadce90f85c50d0bb0dd4f.md | 107 +++++++ .../60fadd972e6ffe0d6858fa2d.md | 153 ++++++++++ .../60fadfa2b540b70dcfa8b771.md | 2 +- .../60fc236dc04532052926fdac.md | 127 ++++++++ .../60ffe1bc30415f042faea936.md | 144 ++++++++++ .../60ffe4f4ec18cd04dc470c56.md | 146 ++++++++++ .../60ffe7d8aae62c05bcc9e7eb.md | 147 ++++++++++ .../60ffefd6479a3d084fb77cbc.md | 2 +- .../62019093fe30e278e797d2f6.md | 266 +++++++++++++++++ .../620191707bc65579ddd3ce15.md | 271 ++++++++++++++++++ 36 files changed, 3489 insertions(+), 8 deletions(-) create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md create mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md index ec690a94712..83488b23211 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md @@ -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') diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md index bf10cd4ace0..bc5e9fc246d 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md @@ -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` 要素は親要素内の中央に配置する必要があります diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md new file mode 100644 index 00000000000..a969f2d0b8c --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md @@ -0,0 +1,70 @@ +--- +id: 5dc17dc8f86c76b9248c6eb5 +title: ステップ 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +コメントを使うと、ブラウザーの表示に影響を及ぼさずにメッセージを残すことができます。 また、コメントを使ってコードを非アクティブにすることも可能です。 HTML のコメントは `` で終了します。 例えば `` というコメントは、テキスト `TODO: Remove h1` を含んでいます。 + +`p` 要素の上に、次のテキストのコメントを追加してください: + +`TODO: Add link to cat photos` + +# --hints-- + +コメントは `` で終わる必要があります。 コメントの終了を定義する文字が 1 つ以上欠けています。 + +```js +assert(code.match(/-->/)); +``` + +コード内に余分なコメントを開始 / 終了する文字があってはいけません。 余分な `` がブラウザーに表示されています。 + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(//g).length < 2); +``` + +コメントには `TODO: Add link to cat photos` というテキストを含めてください。 + +```js +assert(code.match(//i)); +``` + +コメントが `p` 要素の上にあるようにしてください。 順番が誤っているようです。 + +```js +assert( + code + .replace(/\s/g, '') + .match( + /

clickheretoviewmorecatphotos\.?<\/p>/i + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+

Cat Photos

+--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md new file mode 100644 index 00000000000..edaffdd1347 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md @@ -0,0 +1,73 @@ +--- +id: 5dc2385ff86c76b9248c6eb7 +title: ステップ 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +HTML5 には、さまざまなコンテンツの領域を表す要素があります。 これらの要素によって HTML が読みやすくなり、検索エンジン最適化 (SEO) やアクセシビリティの向上に役立ちます。 + +このページのメインとなるセクションを表すため、`h1` 要素の後に開始タグ `
`、`p` 要素の後に終了タグ `
` を追加しましょう。 + +# --hints-- + +`main` 要素には開始タグが必要です。 開始タグは `` のような形式の構文です。 + +```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 + + +--fcc-editable-region-- +

CatPhotoApp

+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md index 17856640684..07ea5ab8855 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md @@ -7,7 +7,7 @@ dashedName: step-9 # --description-- -Тепер позбудьтеся горизонтальної смуги прокрутки, встановивши для `body` властивість `margin` за замовчуванням, який деякі браузери додають на `0`. +Тепер позбудьтеся горизонтальної смуги прокрутки, встановивши для `body` властивість `margin` за замовчуванням, яку деякі браузери додають на `0`. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md index a0d66b7acc9..7283fe6e520 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md @@ -7,7 +7,7 @@ dashedName: step-13 # --description-- -Перший `fieldset` міститиме поля імені, електронної пошти та пароля. Почніть з додавання чотирьох елементів `label` до першого `fieldset`. +Перший `fieldset` міститиме поля з іменем, електронною поштою та паролем. Почніть з додавання чотирьох елементів `label` до першого `fieldset`. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md new file mode 100644 index 00000000000..f2b41c68a92 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md new file mode 100644 index 00000000000..fec761e23dd --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md new file mode 100644 index 00000000000..a14691e7425 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md new file mode 100644 index 00000000000..915434f7856 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md new file mode 100644 index 00000000000..97ef88ccaa0 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md new file mode 100644 index 00000000000..da2c8568aec --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md new file mode 100644 index 00000000000..6b93686b68b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md new file mode 100644 index 00000000000..bd6c67a7a59 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md new file mode 100644 index 00000000000..edbae5d10fb --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md new file mode 100644 index 00000000000..f139363edec --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md new file mode 100644 index 00000000000..099fbde4111 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md new file mode 100644 index 00000000000..ed9f04e0b3a --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md new file mode 100644 index 00000000000..b877b68836c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md new file mode 100644 index 00000000000..f1c9abda8d3 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md new file mode 100644 index 00000000000..659ddb790bc --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md new file mode 100644 index 00000000000..1829dcacb39 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+ + + +
+
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md new file mode 100644 index 00000000000..a5f1e9fefbd --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md new file mode 100644 index 00000000000..ca5f1285460 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md new file mode 100644 index 00000000000..93683f404bd --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md new file mode 100644 index 00000000000..e1ebcee9dab --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md new file mode 100644 index 00000000000..1601c876b48 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md new file mode 100644 index 00000000000..b54ec8f396e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md index 827cb1e603a..f799aa338d1 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md @@ -9,7 +9,7 @@ dashedName: step-45 Для другого `fieldset` потрібно, щоб текст `input` та `label` з’являвся в одному рядку. -Почніть з надання елементам `input` другого `fieldset` класу `inline`. +Почніть з надання елементам `input` в другому `fieldset` класу `inline`. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md new file mode 100644 index 00000000000..eaea858f4d6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md new file mode 100644 index 00000000000..df701ea7180 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md new file mode 100644 index 00000000000..0a3ec5f2a4b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md new file mode 100644 index 00000000000..a274e800a66 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md @@ -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 + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md index 60e5ddcbdbe..8a1f756518d 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md @@ -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)'); diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md new file mode 100644 index 00000000000..6379434e490 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md @@ -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 + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```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-- +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md new file mode 100644 index 00000000000..6a351e16232 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md @@ -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 + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```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-- +```