chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Додаємо кнопку "відправити" у форму
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
|
||||
forumTopicId: 16627
|
||||
dashedName: add-a-submit-button-to-a-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додаймо кнопку `submit` (відправити) у форму. При натисканні цієї кнопки дані з форми будуть відправлені за URL-адресою, яка попередньо була прописана у атрибуті `action` форми.
|
||||
|
||||
Ось приклад кнопки "відправити":
|
||||
|
||||
```html
|
||||
<button type="submit">this button submits the form</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте кнопку наприкінці вашого елемента `form` з типом `submit`, де має бути написано `Submit`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Всередині вашої `form` має бути прописана `button`.
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
```
|
||||
|
||||
Ваша кнопка "відправити" повинна мати атрибут `type`, встановлений на `submit`.
|
||||
|
||||
```js
|
||||
assert($('button').attr('type') === 'submit');
|
||||
```
|
||||
|
||||
Ваша кнопка "відправити" повинна мати лише текст `Submit`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button')
|
||||
.text()
|
||||
.match(/^\s*submit\s*$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `button` повинен мати кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Додаємо зображення до свого вебсайту
|
||||
challengeType: 0
|
||||
forumTopicId: 16640
|
||||
dashedName: add-images-to-your-website
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете додати зображення до свого вебсайту, якщо використаєте елемент `img` та вкажете чітку URL-адресу зображення, використовуючи атрибут `src`.
|
||||
|
||||
Ось приклад:
|
||||
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg">
|
||||
```
|
||||
|
||||
Зауважте, що елементи `img` автоматично закриваються.
|
||||
|
||||
Усі елементи `img` **повинні** мати атрибут `alt`. Текст всередині атрибуту `alt` використовують для покращення доступності для користувачів. Він з'являється замість зображення, якщо воно не завантажується.
|
||||
|
||||
**Зверніть увагу:** якщо зображення декоративне, краще за все використовувати пустий атрибут `alt`.
|
||||
|
||||
В ідеалі атрибут `alt` не повинен містити спеціальні символи (окрім ситуацій, де вони обов'язкові).
|
||||
|
||||
Додамо атрибут `alt` до нашого `img` прикладу вище:
|
||||
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Спробуймо додати зображення до нашого вебсайту:
|
||||
|
||||
Вставте елемент `img` перед чинними елементами `p` у вашому елементі `main`.
|
||||
|
||||
Тепер встановіть атрибут `src` так, щоб він вказував на URL-адресу `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`
|
||||
|
||||
І не забудьте дати вашому елементу `img` атрибут `alt` з відповідним текстом.
|
||||
|
||||
# --hints--
|
||||
|
||||
На вашій сторінці має бути зображення.
|
||||
|
||||
```js
|
||||
assert($('img').length);
|
||||
```
|
||||
|
||||
Ваше зображення має містити атрибут `src`, який вказує на зображення кошеня.
|
||||
|
||||
```js
|
||||
assert(/^https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg$/i.test($('img').attr('src')));
|
||||
```
|
||||
|
||||
Атрибут `alt` вашого елементу зображення не має бути порожнім.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').attr('alt') &&
|
||||
$('img').attr('alt').length &&
|
||||
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
|
||||
__helpers.removeWhiteSpace(code)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Додаємо заповнювач (плейсхолдер) до текстового поля
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
||||
forumTopicId: 16647
|
||||
dashedName: add-placeholder-text-to-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Заповнювач (плейсхолдер) – це текст, який демонструється у вашому елементі `input`, перш ніж користувач щось введе.
|
||||
|
||||
Ви можете створити заповнювач (плейсхолдер) таким чином:
|
||||
|
||||
```html
|
||||
<input type="text" placeholder="this is placeholder text">
|
||||
```
|
||||
|
||||
**Зверніть увагу:** пам'ятайте, що елементи `input` закриваються автоматично.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Зробіть значенням `placeholder` вашого тексту `input` "URL світлини кота".
|
||||
|
||||
# --hints--
|
||||
|
||||
Вам треба додати атрибут `placeholder` до чинного елемента тексту `input`.
|
||||
|
||||
```js
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
Зробіть `cat photo URL` значенням вашого атрибуту `placeholder`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input') &&
|
||||
$('input').attr('placeholder') &&
|
||||
$('input')
|
||||
.attr('placeholder')
|
||||
.match(/cat\s+photo\s+URL/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Готовий елемент `input` не повинен мати кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
```
|
||||
|
||||
Готовий елемент `input` повинен мати дійсний синтаксис.
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Автоматично вмикаємо радіокнопки та прапорці
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
||||
forumTopicId: 301094
|
||||
dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете автоматично вмикати прапорець чи радіокнопку завдяки атрибуту `checked`.
|
||||
|
||||
Для цього просто додайте слово `checked` всередину елемента input. Наприклад:
|
||||
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Встановіть автоматичне ввімкнення першої радіокнопки та першого прапорця.
|
||||
|
||||
# --hints--
|
||||
|
||||
Перша радіокнопка у вашій формі має бути ввімкненою автоматично.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').prop('checked'));
|
||||
```
|
||||
|
||||
Перший прапорець у вашій формі має бути ввімкнений автоматично.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').prop('checked'));
|
||||
```
|
||||
|
||||
Ви не маєте змінювати текст всередині позначки `Indoor`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('label[for="indoor"]')?.innerText?.trim(), 'Indoor');
|
||||
```
|
||||
|
||||
Ви не маєте змінювати текст всередині позначки `Loving`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('label[for="loving"]')?.innerText?.trim(), 'Loving');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Коментувати HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
|
||||
forumTopicId: 16782
|
||||
dashedName: comment-out-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Пам'ятайте, для того, щоб почати коментувати, вам необхідно використовувати `<!--` і щоб завершити коментувати, вам необхідно використовувати `-->`
|
||||
|
||||
Тут вам буде необхідно завершити коментувати перед початком елементу `h2`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Прокоментуйте ваші `h1` та `p` елементи, але не `h2` елемент.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `h1` повинен бути прокоментованим так, щоб його не було видно на сторінці.
|
||||
|
||||
```js
|
||||
assert($('h1').length === 0);
|
||||
```
|
||||
|
||||
Ваш елемент `h2` не повинен бути прокоментованим так, щоб його було видно на сторінці.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
Ваш елемент `p` має бути прокоментованим так, щоб його не було видно на сторінці.
|
||||
|
||||
```js
|
||||
assert($('p').length === 0);
|
||||
```
|
||||
|
||||
Кожен ваш коментар має бути закритий з `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
Ви не повинні змінювати порядок `h1` `h2` чи `p` у коді.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!--<h1>Hello World</h1>-->
|
||||
<h2>CatPhotoApp</h2>
|
||||
<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Створюємо невпорядкований маркований список
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
forumTopicId: 16814
|
||||
dashedName: create-a-bulleted-unordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML має спеціальний елемент для створення <dfn>unordered lists</dfn> (невпорядкованих списків) чи пронумерованих списків.
|
||||
|
||||
Невпорядковані списки починаються з відкриття елементу `<ul>`, після якого слідує будь-яка кількість елементів `<li>`. Невпорядковані списки закриваються `</ul>`.
|
||||
|
||||
Наприклад:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>cheese</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
створить список точних значень `milk` та `cheese`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Видаліть останні два елементи `p` та створіть у нижній частині сторінки невпорядкований список трьох речей, які люблять коти.
|
||||
|
||||
# --hints--
|
||||
|
||||
Створіть елемент `ul`.
|
||||
|
||||
```js
|
||||
assert($('ul').length > 0);
|
||||
```
|
||||
|
||||
У вас має бути три елементи `li` всередині вашого елементу `ul`.
|
||||
|
||||
```js
|
||||
assert($('ul li').length > 2);
|
||||
```
|
||||
|
||||
Ваш елемент `ul` повинен містити тег, що закривається.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/gi) &&
|
||||
code.match(/<ul/gi) &&
|
||||
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
Ваші елементи `li` повинні містити теги, що закриваються.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/gi) &&
|
||||
code.match(/<li[\s>]/gi) &&
|
||||
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
Ваші елементи `li` не повинні містити порожній рядок чи навіть пробіли.
|
||||
|
||||
```js
|
||||
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>mice</li>
|
||||
<li>catnip</li>
|
||||
</ul>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Створити елемент форми
|
||||
challengeType: 0
|
||||
forumTopicId: 16817
|
||||
dashedName: create-a-form-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете створювати вебформи, які фактично відправляють дані на сервер, не використовуючи нічого крім HTML. Це можна зробити, вказавши атрибут `action` у вашому елементі `form`.
|
||||
|
||||
Наприклад:
|
||||
|
||||
```html
|
||||
<form action="/url-where-you-want-to-submit-form-data">
|
||||
<input>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Вкласти наявний елемент `input` всередину елементу `form` та призначити `"https://www.freecatphotoapp.com/submit-cat-photo"` атрибуту `action` елементу `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Чинний елемент `input` повинен входити в елемент `form`.
|
||||
|
||||
```js
|
||||
const inputElem = document.querySelector('form input');
|
||||
assert(
|
||||
inputElem.getAttribute('type') === 'text' &&
|
||||
inputElem.getAttribute('placeholder') === 'cat photo URL'
|
||||
);
|
||||
```
|
||||
|
||||
Ваша `form` повинна мати атрибут `action`, який задасть перехід до `https://www.freecatphotoapp.com/submit-cat-photo`.
|
||||
|
||||
```js
|
||||
const action = $('form').attr('action');
|
||||
assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
|
||||
```
|
||||
|
||||
Ваш елемент `form` повинен мати добре сформовані теги, що відкриваються та закриваються.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/form>/g) &&
|
||||
code.match(/<form [^<]*>/g) &&
|
||||
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Створення набору прапорців
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
forumTopicId: 16821
|
||||
dashedName: create-a-set-of-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Як правило, форми використовують <dfn>checkboxes</dfn> (прапорці) для запитань, які можуть мати більше, ніж одну відповідь.
|
||||
|
||||
Прапорці це тип `input`.
|
||||
|
||||
Кожен з прапорців може бути вкладеним у власний елемент `label`. Коли елемент `input` всередині елементу `label`, він буде автоматично пов'язувати ввідну радіокнопку з міткою навколо неї.
|
||||
|
||||
Усі відповідні вхідні дані повинні мати однаковий атрибут `name`.
|
||||
|
||||
Оптимальна практика - чітке визначення співвідношень між прапорцем `input` та відповідному йому елемента `label`, встановлюючи атрибут `for` в елемент `label`, щоб збігатися з атрибутом `id` асоційованого елементу `input`.
|
||||
|
||||
Ось приклад прапорця:
|
||||
|
||||
```html
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте до своєї форми набір з трьох прапорців. Кожен з прапорців може бути вкладеним в рамках власного елементу `label`. Усі три прапорці повинні поділитися атрибутом `name` з `personality`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваша сторінка повинна мати три елементи прапорця.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length > 2);
|
||||
```
|
||||
|
||||
Кожен з ваших трьох прапорців повинен бути вкладеним у рамках власного елементу `label`.
|
||||
|
||||
```js
|
||||
assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
```
|
||||
|
||||
Переконайтеся, що кожен з ваших елементів `label` має тег, що закривається.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Вашим прапорцям варто вказати атрибут `name` з `personality`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
|
||||
);
|
||||
```
|
||||
|
||||
Кожному з ваших прапорців слід додати всередині тег `form`.
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox"
|
||||
name="personality">Lazy</label>
|
||||
<label for="evil"><input id="evil" type="checkbox"
|
||||
name="personality">Evil</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Створити набір радіокнопок
|
||||
challengeType: 0
|
||||
forumTopicId: 16822
|
||||
dashedName: create-a-set-of-radio-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете використовувати <dfn>radio buttons</dfn> (радіокнопки) для запитань, де ви хочете, щоб користувач давав вам тільки одну відповідь з декількох варіантів.
|
||||
|
||||
Радіокнопки це тип `input`.
|
||||
|
||||
Кожна з радіокнопок може бути вкладеною у власний елемент `label`. Коли елемент `input` всередині елементу `label`, він буде автоматично пов'язувати ввідну радіокнопку з міткою навколо неї.
|
||||
|
||||
Усі пов'язані радіокнопки повинні мати однаковий атрибут `name`, щоб створити групу радіокнопок. Створюючи групу радіокнопок, вибір будь-якої однієї радіокнопки автоматично зніме інші радіокнопки всередині тієї ж групи, гарантуючи, що користувач дасть тільки одну відповідь.
|
||||
|
||||
Приклад радіокнопки:
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
Оптимальна практика - встановлення атрибута `for` в елементі `label` зі значенням, яке відповідає значенню атрибута `id` елемента `input`. Це дозволяє скористатися допоміжними технологіями, щоб створити співвідношення між міткою та пов'язаним елементом `input`. Приклад:
|
||||
|
||||
```html
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">
|
||||
<label for="indoor">Indoor</label>
|
||||
```
|
||||
|
||||
Ми також можемо вкласти елемент `input` всередині тегів `label`:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте пару радіокнопок до вашої форми, кожна вкладена у власний елемент `label`. Одна з них повинна мати опцію `indoor`, а інша повинні мати опцію `outdoor`. Обидві повинні ділитися атрибутом `name` з `indoor-outdoor`, щоб створити радіогрупу.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваша сторінка повинна мати два елементи кнопок `radio`.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
```
|
||||
|
||||
Вашим радіо кнопкам слід вказати атрибут `name` з `indoor-outdoor`.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
```
|
||||
|
||||
Кожна з ваших двох елементів радіо кнопок повинна бути вкладеною у власний елемент `label`.
|
||||
|
||||
```js
|
||||
assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
```
|
||||
|
||||
Кожен з ваших елементів `label` повинен мати тег, що закривається.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Одна з ваших радіо кнопок повинна мати мітку `indoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/indoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Одна з ваших радіо кнопок повинна мати мітку `outdoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/outdoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Кожні з ваших радіо кнопок повинні бути додані всередину тегу `form`.
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Створити текстове поле
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
forumTopicId: 16823
|
||||
dashedName: create-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер створімо вебформу.
|
||||
|
||||
Елементи `input` - зручний спосіб отримати інформацію від користувача.
|
||||
|
||||
Ви можете створити введення тексту так:
|
||||
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
Зверніть увагу, що елементи `input` автоматично закриваються.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть елемент `input` типу `text` під вашими списками.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш додаток має містити елемент `input` типу `text`.
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form>
|
||||
<input type="text">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Створити впорядкований список
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
|
||||
forumTopicId: 16824
|
||||
dashedName: create-an-ordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML має інший спеціальний елемент для створення <dfn>ordered lists</dfn> (впорядкованих списків) чи пронумерованих списків.
|
||||
|
||||
Впорядковані списки починаються з елементу `<ol>`, за яким йде будь-яка кількість елементів `<li>`. Нарешті, впорядковані списки закриваються тегом `</ol>`.
|
||||
|
||||
Наприклад:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Garfield</li>
|
||||
<li>Sylvester</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
створить пронумерований список `Garfield` та `Sylvester`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть впорядкований список з трьох речей, які найбільше ненавидить кіт.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати впорядкований список для `Top 3 things cats hate:` (3 речі, які коти ненавидять найбільше)
|
||||
|
||||
```js
|
||||
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
|
||||
```
|
||||
|
||||
Ви повинні мати невпорядкований список `Things cats love:` (Те, що люблять коти)
|
||||
|
||||
```js
|
||||
assert(/Things cats love:/i.test($('ul').prev().text()));
|
||||
```
|
||||
|
||||
Ви повинні мати тільки один елемент `ul`.
|
||||
|
||||
```js
|
||||
assert.equal($('ul').length, 1);
|
||||
```
|
||||
|
||||
Ви повинні мати тільки один елемент `ol`.
|
||||
|
||||
```js
|
||||
assert.equal($('ol').length, 1);
|
||||
```
|
||||
|
||||
У вас має бути три елементи `li` всередині вашого елементу `ul`.
|
||||
|
||||
```js
|
||||
assert.equal($('ul li').length, 3);
|
||||
```
|
||||
|
||||
Ви повинні мати три елементи `li` всередині елементу `ol`.
|
||||
|
||||
```js
|
||||
assert.equal($('ol li').length, 3);
|
||||
```
|
||||
|
||||
Ваш елемент `ul` повинен мати тег, що закривається.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/g) &&
|
||||
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `ol` повинен мати тег, що закривається.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ol>/g) &&
|
||||
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `li` повинен мати тег, що закривається.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/g) &&
|
||||
code.match(/<li>/g) &&
|
||||
code.match(/<\/li>/g).length === code.match(/<li>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Елементи `li` у вашому невпорядкованому списку не повинні бути порожніми.
|
||||
|
||||
```js
|
||||
$('ul li').each((i, val) =>
|
||||
assert(__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
Елементи `li` у вашому впорядкованому списку не повинні бути порожніми.
|
||||
|
||||
```js
|
||||
$('ol li').each((i, val) =>
|
||||
assert(!!__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>hate 1</li>
|
||||
<li>hate 2</li>
|
||||
<li>hate 3</li>
|
||||
</ol>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Оголошення типу документа Doctype HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
|
||||
forumTopicId: 301095
|
||||
dashedName: declare-the-doctype-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
До сьогодні проблеми стосувалися спеціальних елементів HTML та їхнього використання. Проте, є декілька елементів, які надають загальну структуру вашій сторінці і повинні бути включеними у кожен документ HTML.
|
||||
|
||||
У верхній частині вашого документа, вам необхідно вказати в браузері яку версію HTML ви використовуєте. HTML - мова, що розвивається і регулярно оновлюється. Більшість основних браузерів підтримують останню специфікацію, яка є HTML5. Проте, старші вебсторінки, можливо, використовують попередні версії мови.
|
||||
|
||||
Ви повідомляєте браузеру цю інформацію, додаючи тег `<!DOCTYPE ...>` у першому рядку, де частина `...` є версією HTML. Для HTML5, ви використовуєте `<!DOCTYPE html>`.
|
||||
|
||||
`!` та регістр `DOCTYPE` є важливими, особливо для старших браузерів. `html` не залежить від регістра.
|
||||
|
||||
Далі, решта HTML коду повинна бути оброблена в теги `html`. Відкриття `<html>` йде безпосередньо нижче рядка `<!DOCTYPE html>`, а закривання `</html>` йде внизу сторінки.
|
||||
|
||||
Ось приклад структури сторінки. Ваш HTML код буде між двома тегами `html`.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте тег `DOCTYPE` для HTML5 вгорі пустого HTML-документа в редакторі кода. Під ним, додайте відкриття і закриття тегів `html`, які містяться навколо елементу `h1`. Заголовок може містити будь-який текст.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен включати тег `<!DOCTYPE html>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
```
|
||||
|
||||
Має бути один елемент `html`.
|
||||
|
||||
```js
|
||||
assert($('html').length == 1);
|
||||
```
|
||||
|
||||
Теги `html` повинні бути пронумерованими навколо елементу `h1`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<h1> Hello world </h1>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Визначення head та body документа HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
forumTopicId: 301096
|
||||
dashedName: define-the-head-and-body-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете додати інший рівень організації у вашому документі HTML в межах тегів `html` з елементами `head` та `body`. Будь-яка розмітка з інформацією про вашу сторінку буде у тезі `head`. Тоді будь-яка розмітка із вмістом сторінки (яка показується для користувача) буде у тезі `body`.
|
||||
|
||||
Елементи метаданих, такі як `link`, `meta`, `title`, та `style`, як правило, всередині елементу `head`.
|
||||
|
||||
Ось приклад макету сторінки:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Відредагуйте відмітку так, щоб в ній були `head` та `body`. Елемент `head` повинен містити тільки `title`, а елемент `body` повинен містити тільки `h1` та `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
На сторінці має бути тільки один елемент `head`.
|
||||
|
||||
```js
|
||||
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
|
||||
assert(headElems && headElems.length === 1);
|
||||
```
|
||||
|
||||
На сторінці повинен бути тільки один елемент `body`.
|
||||
|
||||
```js
|
||||
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
|
||||
assert(bodyElems && bodyElems.length === 1);
|
||||
```
|
||||
|
||||
Елемент `head` повинен бути потоком елементу `html`.
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
|
||||
let foundHead;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
|
||||
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
|
||||
}
|
||||
assert(foundHead);
|
||||
```
|
||||
|
||||
Елемент `body` має бути потоком елементу `html`.
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
|
||||
let foundBody;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
|
||||
}
|
||||
assert(foundBody);
|
||||
```
|
||||
|
||||
Елемент `head` повинен міститися навколо елементу `title`.
|
||||
|
||||
```js
|
||||
const headChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
|
||||
let foundTitle;
|
||||
if (headChildren) {
|
||||
const { children } = headChildren.groups;
|
||||
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
|
||||
}
|
||||
assert(foundTitle);
|
||||
```
|
||||
|
||||
Елемент `body` повинен міститися навколо обох елементів `h1` та `p`.
|
||||
|
||||
```js
|
||||
const bodyChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
|
||||
let foundElems;
|
||||
if (bodyChildren) {
|
||||
const { children } = bodyChildren.groups;
|
||||
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
|
||||
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
|
||||
const numH1s = h1s ? h1s.length : 0;
|
||||
const numPs = ps ? ps.length : 0;
|
||||
foundElems = numH1s === 1 && numPs === 1;
|
||||
}
|
||||
assert(foundElems);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>The best page ever</title>
|
||||
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The best page ever</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Видалення елементів HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
|
||||
forumTopicId: 17559
|
||||
dashedName: delete-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У вашому телефоні не так багато місця по вертикалі.
|
||||
|
||||
Потрібно видалити непотрібні елементи, щоб розпочати створення CatPhotoApp.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Видаліть елемент `h1`, щоб спростити перегляд.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `h1` слід видалити.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
```
|
||||
|
||||
Елемент `h2` має бути на сторінці.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
```
|
||||
|
||||
Елемент `p` має бути на сторінці.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Заповніть пробіл текстом-заповнювачем
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
|
||||
forumTopicId: 18178
|
||||
dashedName: fill-in-the-blank-with-placeholder-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Веброзробники традиційно використовують <dfn>lorem ipsum text</dfn> як текст заміщення. Текст заміщення lorem ipsum - випадково взятий з відомого уривку Цицерона із Древнього Рима.
|
||||
|
||||
Текст Lorem ipsum використовується як текст заміщення типографами з 16 століття і ця традиція триває в інтернеті.
|
||||
|
||||
Що ж, 5 століть досить довгий час. Оскільки ми створюємо CatPhotoApp, використаємо те, що називається текстом "kitty ipsum".
|
||||
|
||||
# --instructions--
|
||||
|
||||
Замініть текст всередині елементу `p` першими декількома словами цього тексту kitty ipsum: `Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `p` повинен містити перші декілька слів представленого тексту "kitty ipsum".
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Заголовок з елементом h2
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
|
||||
forumTopicId: 18196
|
||||
dashedName: headline-with-the-h2-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Протягом наступних уроків ми будем крок за кроком створювати веб-додаток Cat Photo мовою HTML5.
|
||||
|
||||
Елемент `h2`, з яким будете працювати на цьому етапі, додасть заголовок другого рівня на вашу сторінку.
|
||||
|
||||
Цей елемент відображає структуру вашого сайту у браузері. Елементи `h1` часто використовують для основних заголовків, а елементи `h2`, як правило, використовують для підзаголовків. Існують також елементи `h3`, `h4`, `h5` і `h6` на позначення різних рівнів підзаголовків.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте теґ `h2`, який містить фразу "CatPhotoApp" для того, щоб створити другий HTML-елемент під написом "Hello World" з елементом `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Створіть елемент `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
Елемент `h2` повинен мати кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h2>/g) &&
|
||||
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `h2` повинен містити текст `CatPhotoApp`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен містити текст `Hello World`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
Елемент `h1` має бути перед елементом `h2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Інформація щодо елементу paragraph
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
|
||||
forumTopicId: 18202
|
||||
dashedName: inform-with-the-paragraph-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елементи `p` найчастіше використовуються в абзацах тексту на сайтах. `p` скорочено від "paragraph".
|
||||
|
||||
Ось як ви можете створити елемент paragraph:
|
||||
|
||||
```html
|
||||
<p>I'm a p tag!</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть елемент `p` під `h2` елементом, і введіть текст `Hello Paragraph`.
|
||||
|
||||
**Примітка:** як правило, усі HTML теги повинні писатись із малої літери, наприклад `<p></p>` не `<P></P>`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен містити правильний елемент `p`.
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
Ваш елемент `p` повинен містити текст `Hello Paragraph`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
Ваш елемент `p` повинен містити кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Ознайомлення з елементами HTML5
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
forumTopicId: 301097
|
||||
dashedName: introduction-to-html5-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В HTML5 вводяться більш описові теги HTML. Серед них `main`, `header`, `footer`, `nav`, `video`, `article`, `section` та інші.
|
||||
|
||||
Ці теги надають вашому HTML описову структуру, полегшують прочитання вашого HTML, а також допомагають з оптимізацією пошукової системи (SEO) та доступністю. Тег HTML5 `main` допомагає пошуковим системам та іншим розробникам знайти основний зміст вашої сторінки.
|
||||
|
||||
Нижче наведено приклад використання елемента `main` з вкладеними у нього двома дочірніми елементами:
|
||||
|
||||
```html
|
||||
<main>
|
||||
<h1>Hello World</h1>
|
||||
<p>Hello Paragraph</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
**Примітка:** Багато нових тегів HTML5 та їхні переваги описані в розділі "Прикладна доступність".
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть другий елемент `p` з поданим текстом-прикладом: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
|
||||
Тоді створіть `main` елемент і помістіть лише два `p` елементи у `main` елемент.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати 2 елементи `p` з поданим текстом-прикладом.
|
||||
|
||||
```js
|
||||
assert($('p').length > 1);
|
||||
```
|
||||
|
||||
Кожен з `p` елементів повинен мати кінцевий тег.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Ваш `p` елемент повинен містити перші декілька слів з додаткового тексту-прикладу `kitty ipsum`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
Ваш код повинен містити один `main` елемент.
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
Елемент `main` повинен містити два елементи абзацу в якості дочірніх.
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
```
|
||||
|
||||
Тег `main` повинен знаходитися перед тегом першого абзацу.
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>\s*?<p>/g));
|
||||
```
|
||||
|
||||
Тег `main` закриття повинен знаходитися після другого тегу, який закриває абзац.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Покликання (посилання) на зовнішні сторінки з якірними елементами
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
|
||||
forumTopicId: 18226
|
||||
dashedName: link-to-external-pages-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете використовувати елементи `a` (*anchor*) для покликання на контент за межами вашого вебсайту.
|
||||
|
||||
Елементам `a` потрібна веб-адреса цільової сторінки, що називається атрибут `href`. Вони також потребують якірний текст. До прикладу:
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
Тоді ваш браузер відображатиме текст цих покликань `this links to freecodecamp.org`, на яке ви можете натиснути. Це покликання відправить вас на веб-адресу `https://www.freecodecamp.org`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть елемент `a`, що покликається на `https://www.freecatphotoapp.com` та має "світлина кота" як якірний текст.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `a` має містити якірний текст `cat photos`.
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
Вам потрібен елемент `a`, що покликається на `https://www.freecatphotoapp.com`
|
||||
|
||||
```js
|
||||
assert(/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
Ваш елемент `a` повинен мати кінцевий тег.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<a href="https://www.freecatphotoapp.com">cat photos</a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Посилання на внутрішні розділи сторінки з елементами прив’язки
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
forumTopicId: 301098
|
||||
dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елементи `a` (*anchor*) можуть також використовуватися, щоб створити внутрішнє посилання, щоб перейти на різні розділи вебсторінки.
|
||||
|
||||
Щоб створити внутрішнє посилання, ви присвоюєте атрибут посилання `href` хеш-символу `#` плюс значення атрибута `id` для елементу, на який ви хочете зробити внутрішнє посилання, зазвичай нижче на сторінці. Тоді вам необхідно додати той же атрибут `id` елементу, на який ви переходите. `id` - атрибут, який однозначно описує елемент.
|
||||
|
||||
Нижче наведено приклад внутрішнього якірного посилання і його цільового елементу:
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
...
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
Коли користувачі натискають на посилання `Contacts`, вони перейдуть до розділу вебсторінки з заголовком **Контакти**.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть зовнішнє посилання на внутрішнє, змінивши атрибут `href` на `"#footer"` і текст з `cat photos` на `Jump to Bottom`.
|
||||
|
||||
Видаліть атрибут `target="_blank"` із тегу прив'язки, бо це призведе до відкриття прив'язаного документа у новій вкладці вікна.
|
||||
|
||||
Потім додайте атрибут `id` зі значенням `footer` до елементу `<footer>` внизу сторінки.
|
||||
|
||||
# --hints--
|
||||
|
||||
На вашій сторінці повинен бути лише один тег прив'язки.
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
На вашій сторінці повинен бути тільки один тег `footer`.
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
Тег `a` повинен мати атрибут `href` налаштований до "#footer".
|
||||
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
Тег `a` не повинен мати атрибут `target`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof $('a').eq(0).attr('target') == typeof undefined ||
|
||||
$('a').eq(0).attr('target') == true
|
||||
);
|
||||
```
|
||||
|
||||
Текст `a` має бути "Jump to Bottom".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.eq(0)
|
||||
.text()
|
||||
.match(/Jump to Bottom/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Тег `footer` повинен мати атрибут `id` налаштований до "footer".
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="#footer">Jump to Bottom</a>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="footer">Copyright Cat Photo App</footer>
|
||||
```
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Зробити мертве посилання, використовуючи хеш-символ
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
|
||||
forumTopicId: 18230
|
||||
dashedName: make-dead-links-using-the-hash-symbol
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Інколи ви хочете додати `a` елементи до вашого веб-сайту ще перед тим, як дізнаєтесь, куди вони мають посилатися.
|
||||
|
||||
Це також стає в нагоді, коли ви змінюєте поведінку посилання за допомогою `JavaScript`, про який ми дізнаємося пізніше.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Поточним значенням `href` атрибуту є посилання, яке вказує на "`https://www.freecatphotoapp.com`". Щоб створити мертве посилання, замініть значення атрибуту `href` на `#`, також відоме як хеш-символ.
|
||||
|
||||
Наприклад: `href="#"`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `a` елемент повинен бути мертвим посиланням з `href` атрибутом, встановленим на"#".
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '#');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,163 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Вставте якірний елемент в Абзац
|
||||
challengeType: 0
|
||||
forumTopicId: 18244
|
||||
dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Можна вкласти посилання в інші текстові елементи.
|
||||
|
||||
```html
|
||||
<p>
|
||||
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
|
||||
</p>
|
||||
```
|
||||
|
||||
Давайте зупинимося на прикладі. Звичайний текст поміщений в елемент:`p`:
|
||||
|
||||
```html
|
||||
<p> Here's a ... for you to follow. </p>
|
||||
```
|
||||
|
||||
Далі йде *anchor* element `<a>` (який вимагає кінцевого тегу `</a>`):
|
||||
|
||||
```html
|
||||
<a> ... </a>
|
||||
```
|
||||
|
||||
`target` це атрибут прив’язного тегу, який визначає, де відкрити посилання. Значення вказує на відкриття посилання в новій вкладці`_blank`. `href` є атрибутом прив’язки, який містить URL адресу посилання:
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
|
||||
```
|
||||
|
||||
Текст `link to www.freecodecamp.org`, усередині `a`елемента, який називається <dfn>anchor text</dfn> буде відображати посилання, на яке потрібно натиснути:
|
||||
|
||||
```html
|
||||
<a href=" ... " target="...">link to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
Кінцевий результат прикладу буде виглядати наступним чином:
|
||||
|
||||
Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.freecodecamp.org</a> for you to follow.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Вкласти існуючий `a`елемент в новий `p` елемент. Не створюйте нову мітку для прив'язки. У новому абзаці має бути текст із зазначенням `View more cat photos` де `cat photos` є посиланням, а решта - простим текстом.
|
||||
|
||||
# --hints--
|
||||
|
||||
У вас має бути тільки один елемент `a`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
Eлемент `a` повинен покликатись на `https://www.freecatphotoapp.com`".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
Ваш `a` елемент повинен складатися з ідентифікатору `cat photos`
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/cat\sphotos/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Ви повинні створити новий елемент `p`. У вашому HTML-коді повинно бути не менше трьох тегів.`p`.
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
Ваш `a` елемент повинен бути вкладений в новий елемент `p`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `p` повинен мати текст `View more` (з пропуском після нього).
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `a` <em>not</em> не повинен мати текст `View more`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('a')
|
||||
.text()
|
||||
.match(/View\smore/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Кожен з `p` елементів повинен мати кінцевий тег.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<p/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Кожен з ваших `a` елементів повинен мати кінцевий тег.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>View more <a target="_blank" href="https://www.freecatphotoapp.com">cat photos</a></p>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Вкладання багатьох елементів в межах ординарного елементу div
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
|
||||
forumTopicId: 18246
|
||||
dashedName: nest-many-elements-within-a-single-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Елемент `div` також відомий як елемент поділу (div), є контейнером загального призначення для інших елементів.
|
||||
|
||||
Елемент `div` ймовірно є найчастіше використовуваним HTML-елементом з усіх.
|
||||
|
||||
Як і будь-який інший елемент, що не закривається сам, ви можете відкрити елемент `div` з `<div>` та закрити його на іншому рядку з `</div>`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Вкладіть ваші списки "Things cats love" та "Top 3 things cats hate", всі в межах одного елементу `div`.
|
||||
|
||||
Підказка: Спробуйте розмістити свій початковий тег `div` над елементом "Things cats love" `p` та кінцевий тег `div` після вашого кінцевого тега `ol`, щоб два ваших списки знаходились в межах одного `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елементи `p` повинні бути вкладені в елемент `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('p').length > 1);
|
||||
```
|
||||
|
||||
Елемент `ul` повинен бути вкладеним в елемент `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('ul').length > 0);
|
||||
```
|
||||
|
||||
Елемент `ol` повинен бути вкладений в елемент `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('ol').length > 0);
|
||||
```
|
||||
|
||||
Елемент `div` повинен містити кінцевий тег.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Ознайомтесь з HTML елементами
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
|
||||
forumTopicId: 18276
|
||||
dashedName: say-hello-to-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ласкаво просимо в розділ FreeCodeCamp, де ви зможете вивчити HTML-кодування. Ви зможете вивчити процес веб-розробки крок за кроком.
|
||||
|
||||
Перше за все ви створите просту веб-сторінку за допомогою HTML. Ви можете редагувати код безпосередньо у редакторі коду, який вбудований у цю веб-сторінку.
|
||||
|
||||
Чи бачите ви код з написом `<h1>Hello</h1>` у вашому редакторі? Ось це і є HTML-елемент.
|
||||
|
||||
Більшість елементів HTML мають теги відкривання та закривання.
|
||||
|
||||
Так виглядають теги відривання:
|
||||
|
||||
```html
|
||||
<h1>
|
||||
```
|
||||
|
||||
Ось так виглядають теги закривання:
|
||||
|
||||
```html
|
||||
</h1>
|
||||
```
|
||||
|
||||
Єдина відмінність між тегами відкривання і закривання - скісна риска після відкриваючої квадратної дужки тега закривання.
|
||||
|
||||
У кожному завданні є тести, які можна виконувати в будь-який час, натиснувши на кнопку "Виконати тести". Коли ви пройдете всі тести, вам буде запропоновано надіслати ваш розв'язок та перейти до наступного завдання з кодування.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Щоб пройти тест у цьому завданні, замініть текст у своєму елементі `h1` на `Hello World`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `h1` елемент повинен містити текст `Hello World`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Перетворіть зображення на посилання
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
|
||||
forumTopicId: 18327
|
||||
dashedName: turn-an-image-into-a-link
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете перетворити зображення на посилання, вклавши їх в `a` елемент.
|
||||
|
||||
Вкладіть ваше зображення в `a` елемент. Наприклад:
|
||||
|
||||
```html
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Three kittens running towards the camera."></a>
|
||||
```
|
||||
|
||||
Не забувайте використовувати `#` як властивість `href` вашого елемента `a`, щоб перетворити його на мертве посилання.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Розмістіть наявний елемент зображення в `a` (*anchor*) елементі.
|
||||
|
||||
Після цього наведіть курсор на ваше зображення. Звичайний вказівник вашого курсора повинен стати вказівником натискання за посиланням. Тепер зображення стало посиланням.
|
||||
|
||||
# --hints--
|
||||
|
||||
Наявний `img` елемент повинен бути вкладеним в `a` елемент.
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
```
|
||||
|
||||
Ваш `a` елемент повинен бути мертвим посиланням з `href` атрибутом, встановленим на `#`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
Кожен з ваших `a` елементів повинен мати тег закривання.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Розкоментований HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
|
||||
forumTopicId: 18329
|
||||
dashedName: uncomment-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Коментування - це спосіб, за допомогою якого ви можете залишити коментарі для інших розробників в межах вашого коду, не впливаючи на результат отриманого значення, який відображається кінцевому користувачу.
|
||||
|
||||
Коментування є також і зручним способом зробити код неактивним без необхідності його повного видалення.
|
||||
|
||||
Коментарі в HTML починаються з `<!--` і закінчуються `-->`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Прокоментуйте ваші `h1`, `h2` та `p` елементи.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `h1` має бути видимим на сторінці шляхом його розкоментування.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
Ваш елемент `h2` має бути видимим на сторінці шляхом його розкоментування.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
Ваш елемент `p` має бути видимим на сторінці шляхом його розкоментування.
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
Кінцеві теги коментарів не мають бути видимими на сторінці (тобто `-->`).
|
||||
|
||||
```js
|
||||
assert(!$('*:contains("-->")')[1]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Використання HTML5 для отримання потрібного поля
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
|
||||
forumTopicId: 18360
|
||||
dashedName: use-html5-to-require-a-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете створити певні поля з формами так, щоб користувач не зміг відправити їх до тих пір, поки вони не будуть заповнені.
|
||||
|
||||
Наприклад, якщо ви хочете створити поле для введення тексту, просто додайте атрибут `required` в межах вашого елемента `input`, на кшталт цього: `<input type="text" required>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Зробіть з вашого тексту `input` поле `required` так, щоб користувач не міг надіслати форму без повного заповнення поля.
|
||||
|
||||
Потім спробуйте надіслати форму без введення тексту. Бачите як ваша форма HTML5 повідомляє, що поле є обов'язковим для заповнення?
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш текст `input` елемента повинен містити `required` атрибут.
|
||||
|
||||
```js
|
||||
assert($('input').prop('required'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" required placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 5c6c06847491271903d37cfd
|
||||
title: Використовуйте атрибут значення за допомогою радіокнопок та прапорців
|
||||
challengeType: 0
|
||||
forumTopicId: 301099
|
||||
dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
При відправленні форми, дані надсилаються на сервер і вмикають записи для обраних параметрів. Вхідні дані типу `radio` та`checkbox` повідомляють свої значення з атрибуту `value`.
|
||||
|
||||
Наприклад:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
</label>
|
||||
```
|
||||
|
||||
Ось тут, ви маєте два вхідні `radio`. Коли користувач розміщує форму з обраним параметром `indoor`, дані форми будуть містити рядок:`indoor-outdoor=indoor`. Це стосується вхідних атрибутів "indoor" `name`та `value`.
|
||||
|
||||
Якщо ви опустили атрибут `value`, надіслані дані форми використовуватимуть значення за замовчуванням, що представляє `on`. В цьому сценарії, якщо користувач натиснув на параметр "indoor" і надіслав форму, отримані дані форми будуть `indoor-outdoor=on`, що немає сенсу. Таким чином, атрибут `value` повинен бути встановлений для чогось, щоб ідентифікувати параметр.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Надайте кожному з існуючих атрибутів `radio` і `checkbox` вводу `value`. Не створюйте нові елементи радіо чи прапорця. В якості значення атрибуту в нижньому регістрі використовуйте текст для вхідних міток.
|
||||
|
||||
# --hints--
|
||||
|
||||
Одна з ваших радіокнопок повинна мати атрибут `value` з `indoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Одна з ваших радіокнопок повинна мати атрибут `value` з `outdoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Outdoor") > input[type="radio"]').filter(
|
||||
"[value='outdoor']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Один із ваших прапорців повинен мати атрибут `value` з `loving`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Loving") > input[type="checkbox"]').filter(
|
||||
"[value='loving']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Один із ваших прапорців повинен мати атрибут `value` з`lazy`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Один із ваших прапорців повинен мати атрибут `value` з `energetic`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Energetic") > input[type="checkbox"]').filter(
|
||||
"[value='energetic']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
Reference in New Issue
Block a user