gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,curriculum): processed translations - new ukrainian (#44447)

Browse Source
This commit is contained in:
camperbot
2021-12-10 11:14:24 +05:30
committed by GitHub
parent 8651ee1797
commit 0473dedf47
1663 changed files with 156692 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md Normal file
View File

@@ -0,0 +1,90 @@
---
id: bad87fee1348bd9aec908849
title: Додавання елементів у Bootstrap Wells
challengeType: 0
forumTopicId: 16636
dashedName: add-elements-within-your-bootstrap-wells
---
# --description--
Наразі є декілька елементів `div` у кожному стовпчику рядка. Саме така кількість елементів є необхідною для наступного кроку. Тепер додаємо елементи `button`.
Три елементи `button` мають бути вкладені у кожен елемент `div` класу `well`.
# --hints--
Три елементи `button` мають бути вкладені у кожен елемент `div` класу `well`.
```js
assert(
$('div.well:eq(0)').children('button').length === 3 &&
$('div.well:eq(1)').children('button').length === 3
);
```
Загалом має бути 6 елементів `button`.
```js
assert($('button') && $('button').length > 5);
```
Усі елементи `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
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
</div>
</div>
<div class="col-xs-6">
<div class="well">
</div>
</div>
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
</div>
</div>
```

178
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md Normal file
View File

@@ -0,0 +1,178 @@
---
id: bad87fee1348bd9aedc08845
title: Додавання іконок Font Awesome до всіх кнопок
challengeType: 0
forumTopicId: 16637
required:
-
link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
raw: true
dashedName: add-font-awesome-icons-to-all-of-our-buttons
---
# --description--
Font Awesome - це зручна бібліотека іконок. Іконки можуть бути веб-шрифтами або векторною графікою. Їх обробляють так само, як і шрифти. Розмір можна вказати за допомогою пікселів і вони набудуть розміру шрифту своїх батьківських елементів HTML.
# --instructions--
Використовуйте Font Awesome, щоб додати іконку `info-circle` до кнопки "Інформація" та іконку `trash` до кнопки "Видалити".
**Примітка:** Елемент `span` є допустимою альтернативою елемента `i` для вказівок нижче.
# --hints--
Необхідно додати `<i class="fas fa-info-circle"></i>` до елементу кнопки `info`.
```js
assert(
$('.btn-info > i').is('.fas.fa-info-circle') ||
$('.btn-info > span').is('.fas.fa-info-circle')
);
```
Необхідно додати `<i class="fas fa-trash"></i>` до елементу кнопки `delete`.
```js
assert(
$('.btn-danger > i').is('.fas.fa-trash') ||
$('.btn-danger > span').is('.fas.fa-trash')
);
```
Кожен з елементів `i` повинен містити кінцевий теґ, а `<i class="fas fa-thumbs-up"></i>` входити до елементу кнопки `like`.
```js
assert(
code.match(/<\/i>|<\/span/g) &&
code.match(/<\/i|<\/span>/g).length > 2 &&
($('.btn-primary > i').is('.fas.fa-thumbs-up') ||
$('.btn-primary > span').is('.fas.fa-thumbs-up'))
);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fas fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

195
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md Normal file
View File

@@ -0,0 +1,195 @@
---
id: bad87fee1348bd9aedd08845
title: Додавання іконок Font Awesome до кнопок
challengeType: 0
forumTopicId: 16638
required:
-
link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
raw: true
dashedName: add-font-awesome-icons-to-our-buttons
---
# --description--
Font Awesome - це зручна бібліотека іконок. Іконки можуть бути веб-шрифтами або векторною графікою. Їх обробляють так само, як і шрифти. Розмір можна вказати за допомогою пікселів і вони набудуть розміру шрифту своїх батьківських елементів HTML.
Font Awesome можна внести до будь-якого додатка, додавши нижчезазначений код на початку цього HTML:
```html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
```
У даному випадку, ми вже додали його до цієї сторінки за замовчуванням.
Елемент `i` спочатку використовували, щоб виділяти інші елементи курсивом, але зараз переважно використовують для іконок. Можна додати класи Font Awesome до елементу `i`, щоб змінити його на іконку, наприклад:
```html
<i class="fas fa-info-circle"></i>
```
Зверніть увагу, що елемент `span` також можна використовувати з іконками.
# --instructions--
Використовуйте Font Awesome, щоб додавати іконку `thumbs-up` до кнопки "Подобається", надаючи їй елемент `i` із класами `fas` та `fa-thumbs-up`. Необхідно переконатися, що текст `Like` залишається поруч з іконкою.
# --hints--
Необхідно додати елемент `i` із класами `fas` та `fa-thumbs-up`.
```js
assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up'));
```
Іконка `fa-thumbs-up` має бути розміщена всередині кнопки "Подобається".
```js
assert(
($('i.fa-thumbs-up').parent().text().match(/Like/gi) &&
$('.btn-primary > i').is('.fas.fa-thumbs-up')) ||
($('span.fa-thumbs-up').parent().text().match(/Like/gi) &&
$('.btn-primary > span').is('.fas.fa-thumbs-up'))
);
```
Елемент `i` повинен бути вкладеним у елемент `button`.
```js
assert(
$('button').children('i').length > 0 ||
$('button').children('span').length > 0
);
```
Елемент іконки повинен містити кінцевий теґ.
```js
assert(code.match(/<\/i>|<\/span>/g));
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

93
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md Normal file
View File

@@ -0,0 +1,93 @@
---
id: bad87fee1348bd9aec908853
title: Додавання атрибутів id до елементів Bootstrap
challengeType: 0
forumTopicId: 16639
dashedName: add-id-attributes-to-bootstrap-elements
---
# --description--
Нагадуємо, що крім атрибутів класу, можна також надати кожному із елементів атрибут `id`.
Кожен id повинен бути унікальним для конкретного елементу і вживатися лише один раз на сторінку.
Давайте надамо унікальний id кожному із елементів `div` класу `well`.
Запам'ятайте, що елементу можна надати id таким чином:
```html
<div class="well" id="center-well">
```
Надайте класу well зліва id `left-well`. Надайте класу well справа id `right-well`.
# --hints--
`well` ліворуч повинен мати id `left-well`.
```js
assert(
$('.col-xs-6').children('#left-well') &&
$('.col-xs-6').children('#left-well').length > 0
);
```
`well` праворуч повинен мати id `right-well`.
```js
assert(
$('.col-xs-6').children('#right-well') &&
$('.col-xs-6').children('#right-well').length > 0
);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
```

77
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md Normal file
View File

@@ -0,0 +1,77 @@
---
id: bad87fee1348bd9aec908850
title: Застосування стилю за замовчуванням кнопки Bootstrap
challengeType: 0
forumTopicId: 16657
dashedName: apply-the-default-bootstrap-button-style
---
# --description--
Bootstrap має ще один клас кнопок, що називається `btn-default`.
Застосуйте обидва класи `btn` та `btn-default` до кожного з елементів `button`.
# --hints--
Необхідно застосувати клас `btn` до кожного з елементів `button`.
```js
assert($('.btn').length > 5);
```
Необхідно застосувати клас `btn-default` до кожного з елементів `button`.
```js
assert($('.btn-default').length > 5);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
</div>
</div>
```

175
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md Normal file
View File

@@ -0,0 +1,175 @@
---
id: bad87fee1348cd8acef08813
title: Виклик додаткових дій за допомогою btn-info
challengeType: 0
forumTopicId: 16770
dashedName: call-out-optional-actions-with-btn-info
---
# --description--
Bootstrap має набір заздалегідь встановлених кольорів для кнопок. Клас `btn-info` використовують, щоб привернути увагу до додаткових дій, які може виконувати користувач.
Створіть нову кнопку блок-елемент Bootstrap з текстом `Info` під вашою кнопкою `Like`, і додайте до неї класи Bootstrap `btn-info` та `btn-block`.
Зверніть увагу, що цим кнопкам все ще необхідні класи `btn` та `btn-block`.
# --hints--
Створіть новий елемент `button` із текстом `Info`.
```js
assert(new RegExp('info', 'gi').test($('button').text()));
```
Обидві кнопки Bootstrap повинні мати класи `btn` і `btn-block`.
```js
assert($('button.btn-block.btn').length > 1);
```
Нова кнопка повинна мати клас `btn-info`.
```js
assert($('button').hasClass('btn-info'));
```
Усі елементи `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
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-block btn-primary">Like</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

157
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md Normal file
View File

@@ -0,0 +1,157 @@
---
id: bad87fee1348bd8acde08812
title: Центрування тексту за допомогою Bootstrap
challengeType: 0
forumTopicId: 16771
dashedName: center-text-with-bootstrap
---
# --description--
Тепер, використовуючи Bootstrap, можемо відцентрувати елемент заголовку для кращого візуального вигляду. Необхідно лише додати клас `text-center` до елементу `h2`.
Пам'ятайте, що до одного елементу можна додати декілька класів, відокремивши кожен із них пробілом, наприклад:
```html
<h2 class="red-text text-center">your text</h2>
```
# --hints--
Елемент `h2` повинен бути відцентрований шляхом застосування класу `text-center`
```js
assert($('h2').hasClass('text-center'));
```
Елемент `h2` все ще повинен мати клас `red-text`
```js
assert($('h2').hasClass('red-text'));
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

185
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md Normal file
View File

@@ -0,0 +1,185 @@
---
id: bad87fee1348cd8acef08812
title: Створення кнопки блок-елементу Bootstrap
challengeType: 0
forumTopicId: 16810
dashedName: create-a-block-element-bootstrap-button
---
# --description--
Здебільшого елементи `button` з класами `btn` та `btn-default` за шириною є такими ж, як і текст, що вони містять. Наприклад:
```html
<button class="btn btn-default">Submit</button>
```
Ця кнопка має бути такої ж ширини, як і слово `Submit`.
<button class='btn btn-default'>Submit</button>
Зміна кнопки на блок-елемент із додатковим класом `btn-block` розтягне її так, щоб заповнити весь горизонтальний простір сторінки, а всі наступні елементи посунуться на "нову лінію" під блоком.
```html
<button class="btn btn-default btn-block">Submit</button>
```
Ця кнопка буде займати 100% доступної ширини.
<button class='btn btn-default btn-block'>Submit</button>
Зверніть увагу, що цим кнопкам все ще необхідний клас `btn`.
Додайте клас Bootstrap `btn-block` до кнопки Bootstrap.
# --hints--
Кнопка все ще повинна мати класи `btn` та `btn-default`.
```js
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
```
Кнопка повинна мати клас `btn-block`.
```js
assert($('button').hasClass('btn-block'));
```
Усі елементи `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
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-default">Like</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-block btn-default">Like</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

176
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md Normal file
View File

@@ -0,0 +1,176 @@
---
id: bad87fee1348cd8acdf08812
title: Створення кнопки Bootstrap
challengeType: 0
forumTopicId: 16811
dashedName: create-a-bootstrap-button
---
# --description--
Bootstrap має власні стилі для елементів `button`, які мають набагато кращий вигляд, ніж прості стилі HTML.
Створіть новий елемент `button` під великим фото кошеняти. Надайте йому класи `btn` та `btn-default` разом із текстом `Like`.
# --hints--
Створіть новий елемент `button` з текстом `Like`.
```js
assert(
new RegExp('like', 'gi').test($('button').text()) &&
$('img.img-responsive + button.btn').length > 0
);
```
Нова кнопка повинна мати два класи: `btn` та `btn-default`.
```js
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
```
Усі елементи `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
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<!-- ADD Bootstrap Styled Button -->
<button class="btn btn-default">Like</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
</html>
```

67
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md Normal file
View File

@@ -0,0 +1,67 @@
---
id: bad87fee1348bd9aec908846
title: Створення заголовка Bootstrap
challengeType: 0
forumTopicId: 16812
dashedName: create-a-bootstrap-headline
---
# --description--
Перейдімо тепер до створення чогось з нуля, щоб відпрацювати набуті навички HTML, CSS та Bootstrap.
Створимо jQuery playground, який незабаром будемо використовувати у завданнях jQuery.
Спершу створіть елемент `h3` з текстом `jQuery Playground`.
Додайте колір до вашого елементу `h3`, використовуючи клас Bootstrap `text-primary`, і відцентруйте його за допомогою класу Bootstrap `text-center`.
# --hints--
На сторінку необхідно додати елемент `h3`.
```js
assert($('h3') && $('h3').length > 0);
```
Елемент `h3` повинен містити кінцевий теґ.
```js
assert(
code.match(/<\/h3>/g) &&
code.match(/<h3/g) &&
code.match(/<\/h3>/g).length === code.match(/<h3/g).length
);
```
Елемент `h3` має бути зафарбований шляхом застосування класу `text-primary`
```js
assert($('h3').hasClass('text-primary'));
```
Елемент `h3` повинен бути відцентрований шляхом застосування класу `text-center`
```js
assert($('h3').hasClass('text-center'));
```
Елемент `h3` повинен містити текст `jQuery Playground`.
```js
assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
```
# --seed--
## --seed-contents--
```html
```
# --solutions--
```html
<h3 class="text-primary text-center">jQuery Playground</h3>
```

68
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md Normal file
View File

@@ -0,0 +1,68 @@
---
id: bad87fee1348bd9bec908846
title: Створення рядка Bootstrap
challengeType: 0
forumTopicId: 16813
dashedName: create-a-bootstrap-row
---
# --description--
Тепер створіть рядок Bootstrap для вбудованих елементів.
Створіть елемент `div` класу `row` під теґом `h3`.
# --hints--
Необхідно додати елемент `div` під елементом `h3`.
```js
assert(
$('div').length > 1 &&
$('div.row h3.text-primary').length == 0 &&
$('div.row + h3.text-primary').length == 0 &&
$('h3.text-primary + div.row').length > 0
);
```
Елемент `div` повинен мати клас `row`
```js
assert($('div').hasClass('row'));
```
`row div` має бути вкладеним у середину `container-fluid div`
```js
assert($('div.container-fluid div.row').length > 0);
```
Елемент `div` повинен містити кінцевий теґ.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"></div>
</div>
```

71
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md Normal file
View File

@@ -0,0 +1,71 @@
---
id: bad87fee1348bd9aec908852
title: Створення класу для використання із селекторами jQuery
challengeType: 0
forumTopicId: 16815
dashedName: create-a-class-to-target-with-jquery-selectors
---
# --description--
Не кожен клас повинен мати відповідний йому CSS. Іноді класи створюють лише з метою полегшення вибору цих елементів за допомогою jQuery.
Надайте кожному з елементів `button` клас `target`.
# --hints--
Необхідно застосувати клас `target` до кожного з елементів `button`.
```js
assert($('.target').length > 5);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="target btn btn-default"></button>
<button class="target btn btn-default"></button>
<button class="target btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="target btn btn-default"></button>
<button class="target btn btn-default"></button>
<button class="target btn btn-default"></button>
</div>
</div>
</div>
</div>
```

177
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md Normal file
View File

@@ -0,0 +1,177 @@
---
id: bad87fee1348bd9aede08845
title: Створення власного заголовка
challengeType: 0
forumTopicId: 16816
dashedName: create-a-custom-heading
---
# --description--
Почнемо зі створення простого заголовка для додатка Cat Photo App, розмістивши в одному рядку назву та зображення кота.
Пам’ятайте, що Bootstrap використовує систему адаптивної сітки, яка полегшує розміщення елементів у рядках та визначення відносної ширини кожного елементу. Більшість класів Bootstrap можуть бути застосовані до елементу `div`.
Вкладіть зображення і елемент `h2` у одинарний елемент `<div class="row">`. Вкладіть елемент `h2` у `<div class="col-xs-8">`, а зображення в `<div class="col-xs-4">` так, щоб вони знаходилися в одному рядку.
Чи помітили, що зображення тепер належного розміру, щоб поміститися поруч із текстом?
# --hints--
Елемент `h2` і найвищий елемент `img` повинні обидва бути вкладені у елемент `div` із класом `row`.
```js
assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
```
Найвищий елемент `img` повинен бути вкладений у `div` із класом `col-xs-4`.
```js
assert(
$('div.col-xs-4:has(img)').length > 0 &&
$('div.col-xs-4:has(div)').length === 0
);
```
Елемент `h2` повинен бути вкладений у `div` із класом `col-xs-8`.
```js
assert(
$('div.col-xs-8:has(h2)').length > 0 &&
$('div.col-xs-8:has(div)').length === 0
);
```
Усі елементи `div` повинні містити кінцеві теґи.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<h2 class="text-primary text-center">CatPhotoApp</h2>
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

71
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md Normal file
View File

@@ -0,0 +1,71 @@
---
id: bad87fee1348bd9aec908848
title: Створення Bootstrap Wells
challengeType: 0
forumTopicId: 16825
dashedName: create-bootstrap-wells
---
# --description--
Bootstrap має клас, що називається `well`, який може створювати візуальний ефект глибини для ваших стовпців.
Вкладіть один елемент `div` класу `well` у кожен із елементів `col-xs-6` `div`.
# --hints--
Необхідно додати елемент `div` класу `well` у середину кожного із елементів `div` класу `col-xs-6`
```js
assert($('div.col-xs-6').not(':has(>div.well)').length < 1);
```
Обидва елементи `div` класу `col-xs-6` повинні бути вкладені у елемент `div` із класом `row`.
```js
assert($('div.row > div.col-xs-6').length > 1);
```
Усі елементи `div` повинні містити кінцеві теґи.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well"></div>
</div>
<div class="col-xs-6">
<div class="well"></div>
</div>
</div>
</div>
```

188
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md Normal file
View File

@@ -0,0 +1,188 @@
---
id: bad87fee1347bd9aedf08845
title: Відмова від власної CSS на користь Bootstrap
challengeType: 0
forumTopicId: 17565
dashedName: ditch-custom-css-for-bootstrap
---
# --description--
Можна очистити код і надати додатку Cat Photo App більш звичного вигляду, використовуючи вбудовані стилі Bootstrap замість попередньо створених власних стилів.
Не слід хвилюватися - буде ще вдосталь часу для налаштування CSS.
Видаліть об'яви CSS `.red-text`, `p`, та `.smaller-image` із елементу `style`, щоб єдиними об'явами, які залишились у елементі `style`, були `h2` та `thick-green-border`.
Потім видаліть елемент `p`, який містить мертве посилання. Після цього видаліть клас `red-text` із елементу `h2` і замініть його на клас Bootstrap `text-primary`.
А тепер видаліть клас `smaller-image` із першого елементу `img` і замініть його на клас `img-responsive`.
# --hints--
Елемент `h2` більше не повинен мати клас `red-text`.
```js
assert(!$('h2').hasClass('red-text'));
```
Елемент `h2` тепер повинен мати клас `text-primary`.
```js
assert($('h2').hasClass('text-primary'));
```
Елементи абзацу більше не повинні використовувати шрифт `Monospace`.
```js
assert(
!$('p')
.css('font-family')
.match(/monospace/i)
);
```
Клас `smaller-image` слід видалити із верхнього зображення.
```js
assert(!$('img').hasClass('smaller-image'));
```
Необхідно додати клас `img-responsive` до верхнього зображення.
```js
assert($('.img-responsive').length > 1);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</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>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<h2 class="text-primary text-center">CatPhotoApp</h2>
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</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>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

125
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md Normal file
View File

@@ -0,0 +1,125 @@
---
id: bad87fee1348bd9aec908855
title: Надання кожному елементу унікального id
challengeType: 0
forumTopicId: 18191
dashedName: give-each-element-a-unique-id
---
# --description--
Слід також уміти використовувати jQuery, щоб обирати кожну кнопку за її унікальним id.
Надайте кожній кнопці унікальний id, починаючи з `target1` і закінчуючи `target6`.
Переконайтеся, що `target1` по `target3` знаходяться у `#left-well`, а `target4` по `target6` розміщені у `#right-well`.
# --hints--
Один елемент `button` повинен мати id `target1`.
```js
assert(
$('#left-well').children('#target1') &&
$('#left-well').children('#target1').length > 0
);
```
Один елемент `button` повинен мати id `target2`.
```js
assert(
$('#left-well').children('#target2') &&
$('#left-well').children('#target2').length > 0
);
```
Один елемент `button` повинен мати id `target3`.
```js
assert(
$('#left-well').children('#target3') &&
$('#left-well').children('#target3').length > 0
);
```
Один елемент `button` повинен мати id `target4`.
```js
assert(
$('#right-well').children('#target4') &&
$('#right-well').children('#target4').length > 0
);
```
Один елемент `button` повинен мати id `target5`.
```js
assert(
$('#right-well').children('#target5') &&
$('#right-well').children('#target5').length > 0
);
```
Один елемент `button` повинен мати id `target6`.
```js
assert(
$('#right-well').children('#target6') &&
$('#right-well').children('#target6').length > 0
);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1"></button>
<button class="btn btn-default target" id="target2"></button>
<button class="btn btn-default target" id="target3"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4"></button>
<button class="btn btn-default target" id="target5"></button>
<button class="btn btn-default target" id="target6"></button>
</div>
</div>
</div>
</div>
```

53
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md Normal file
View File

@@ -0,0 +1,53 @@
---
id: bad87fee1348bd9aec908746
title: Розміщення сторінки всередині елементу Bootstrap container-fluid div
challengeType: 0
forumTopicId: 18198
dashedName: house-our-page-within-a-bootstrap-container-fluid-div
---
# --description--
Тепер переконайтеся, що весь вміст сторінки адаптований до мобільних пристроїв.
Вкладіть елемент `h3` у елемент `div` із класом `container-fluid`.
# --hints--
Елемент `div` повинен мати клас `container-fluid`.
```js
assert($('div').hasClass('container-fluid'));
```
Кожен із елементів `div` повинен містити кінцевий теґ.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
Елемент `h3` повинен бути вкладений у елемент `div`.
```js
assert($('div').children('h3').length > 0);
```
# --seed--
## --seed-contents--
```html
<h3 class="text-primary text-center">jQuery Playground</h3>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>
```

105
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md Normal file
View File

@@ -0,0 +1,105 @@
---
id: bad87fee1348bd9aec908856
title: Позначення кнопок Bootstrap
challengeType: 0
forumTopicId: 18222
dashedName: label-bootstrap-buttons
---
# --description--
Як і елементи well, так слід позначати і кнопки.
Надайте кожному із елементів `button` текст, який відповідає його селектору id.
# --hints--
Елемент `button` з id `target1` повинен містити текст `#target1`.
```js
assert(new RegExp('#target1', 'gi').test($('#target1').text()));
```
Елемент `button` з id `target2` повинен містити текст `#target2`.
```js
assert(new RegExp('#target2', 'gi').test($('#target2').text()));
```
Елемент `button` з id `target3` повинен містити текст `#target3`.
```js
assert(new RegExp('#target3', 'gi').test($('#target3').text()));
```
Елемент `button` з id `target4` повинен містити текст `#target4`.
```js
assert(new RegExp('#target4', 'gi').test($('#target4').text()));
```
Елемент `button` з id `target5` повинен містити текст `#target5`.
```js
assert(new RegExp('#target5', 'gi').test($('#target5').text()));
```
Елемент `button` з id `target6` повинен містити текст `#target6`.
```js
assert(new RegExp('#target6', 'gi').test($('#target6').text()));
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1"></button>
<button class="btn btn-default target" id="target2"></button>
<button class="btn btn-default target" id="target3"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4"></button>
<button class="btn btn-default target" id="target5"></button>
<button class="btn btn-default target" id="target6"></button>
</div>
</div>
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
```

101
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md Normal file
View File

@@ -0,0 +1,101 @@
---
id: bad87fee1348bd9aec908854
title: Позначення Bootstrap Wells
challengeType: 0
forumTopicId: 18223
dashedName: label-bootstrap-wells
---
# --description--
Задля ясності, позначте обидва wells їхніми id.
Над елементом left-well, усередині його елементу `col-xs-6` `div`, додайте елемент `h4` з текстом `#left-well`.
Над елементом right-well, усередині його елементу `col-xs-6` `div`, додайте елемент `h4` з текстом `#right-well`.
# --hints--
Необхідно додати елемент `h4` до кожного з елементів `<div class="col-xs-6">`.
```js
assert(
$('.col-xs-6').children('h4') && $('.col-xs-6').children('h4').length > 1
);
```
Один елемент `h4` повинен містити текст `#left-well`.
```js
assert(new RegExp('#left-well', 'gi').test($('h4').text()));
```
Один елемент `h4` повинен містити текст `#right-well`.
```js
assert(new RegExp('#right-well', 'gi').test($('h4').text()));
```
Усі елементи `h4` повинні містити кінцеві теґи.
```js
assert(
code.match(/<\/h4>/g) &&
code.match(/<h4/g) &&
code.match(/<\/h4>/g).length === code.match(/<h4/g).length
);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
```

215
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md Normal file
View File

@@ -0,0 +1,215 @@
---
id: bad87fee1348bd9aec908845
title: Адаптивне вирівнювання елементів форми за допомогою Bootstrap
challengeType: 0
forumTopicId: 18225
required:
-
link: >-
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
raw: true
dashedName: line-up-form-elements-responsively-with-bootstrap
---
# --description--
Тепер розмістіть на одному рядку форму `input` і `button` "Відправити". Як і до цього використайте елемент `div` із класом `row` та інші елементи `div` у ньому, застосувавши клас `col-xs-*`.
Вкладіть текст форми `input` та `button` "Відправити" у `div` класу `row`. Вкладіть текст форми `input` у div класу `col-xs-7`. Вкладіть `button` "Відправити" вашої форми у `div` класу `col-xs-5`.
Наразі, це останнє завдання до виконання для додатку Cat Photo App. Маємо надію, що вивчення Font Awesome, Bootstrap і адаптивного дизайну було цікавим!
# --hints--
Кнопка подання форми і форма введення тексту мають бути вкладені у div із класом `row`.
```js
assert(
$('div.row:has(input[type="text"])').length > 0 &&
$('div.row:has(button[type="submit"])').length > 0
);
```
Форма введення тексту має бути вкладена у div із класом `col-xs-7`.
```js
assert($('div.col-xs-7:has(input[type="text"])').length > 0);
```
Кнопка подання форми має бути вкладена у div із класом `col-xs-5`.
```js
assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
```
Усі елементи `div` повинні містити кінцеві теґи.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<input type="text" class="form-control" placeholder="cat photo URL" required>
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<div class="row">
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="cat photo URL" required>
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
</div>
</div>
</form>
</div>
```

176
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md Normal file
View File

@@ -0,0 +1,176 @@
---
id: bad87fee1348bd9acde08812
title: Зробіть мобільні зображення адаптивними
challengeType: 0
forumTopicId: 18232
dashedName: make-images-mobile-responsive
---
# --description--
Спочатку додайте нове зображення під вже існуючим. Тепер встановіть атрибут `src` так, щоб він вказував на url `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
Було б чудово, якби це зображення було б відповідним до ширини екрану телефона.
На щастя, у Bootstrap, все, що нам потрібно зробити, це додати `img-responsive` клас до вашого зображення. Зробіть так, і зображення повинно ідеально відповідати ширині вашої сторінки.
# --hints--
У вас усього два зображення.
```js
assert($('img').length === 2);
```
Ваше нове зображення має бути нижче попереднього і має свій клас `img-responsive`.
```js
assert($('img:eq(1)').hasClass('img-responsive'));
```
Нове зображення не має мати клас `smaller-image`.
```js
assert(!$('img:eq(1)').hasClass('smaller-image'));
```
У вашому новому зображенні має бути `src` з `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
```js
assert($('img:eq(1)').attr('src') === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg');
```
Ваш елемент `img` повинен містити кінцевий теґ.
```js
assert(
code.match(/<img/g) &&
code.match(/<img[^<]*>/g).length === 2 &&
code.match(/<img/g).length === 2
);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" 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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive">
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

192
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md Normal file
View File

@@ -0,0 +1,192 @@
---
id: bad87fee1348bd9aeda08845
title: Адаптивні Стилізовані Прапорці
challengeType: 0
forumTopicId: 18269
required:
-
link: >-
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
raw: true
dashedName: responsively-style-checkboxes
---
# --description--
Оскільки Bootstrap класи `col-xs-*` застосовуються до всіх елементів `form`, ви можете використовувати їх також в ваших чекбоксах! Таким чином, прапорці будуть рівномірно розташовані на сторінці, незалежно від того, наскільки широким є роздільна здатність дисплею.
# --instructions--
Вкладіть усі три ваші прапорці в елементі `<div class="row">`. Потім вставте кожен з них в елемент `<div class="col-xs-4">`.
# --hints--
Всі ваші чекбокси мають бути всередині `div` з класом `row`.
```js
assert($('div.row:has(input[type="checkbox"])').length > 0);
```
Всі ваші прапорці мають бути всередині своїх власних `div` з класом `col-xs-4`.
```js
assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
```
Усі елементи `div` повинні містити кінцеві теґи.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

176
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md Normal file
View File

@@ -0,0 +1,176 @@
---
id: bad87fee1348bd9aedb08845
title: Адаптивні стилізовані перемикачі
challengeType: 0
forumTopicId: 18270
required:
-
link: >-
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
raw: true
dashedName: responsively-style-radio-buttons
---
# --description--
Ви також можете використовувати завантажені `col-xs-*` уроки `form` елементів! Таким чином, радіо кнопки будуть рівномірно розташовані на сторінці, незалежно від роздільної здатності екрану.
Вкладіть обидві ваші радіо кнопки в межах елементу `<div class="row">`. Потім вкладіть кожну з них в межах елементу `<div class="col-xs-6">`.
**Примітка:** Як нагадування, радіо кнопки є елементами `input` типу `radio`.
# --hints--
Усі ваші радіо кнопки мають бути вкладені всередині однієї `div` з класом `row`.
```js
assert($('div.row:has(input[type="radio"])').length > 0);
```
Кожна з ваших радіо кнопок повинна бути розташована всередині власного `div` з класом `col-xs-6`.
```js
assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
```
Всі ваші елементи `div` повинні мати кінцеві теги.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

57
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md Normal file
View File

@@ -0,0 +1,57 @@
---
id: bad87fee1348bd9aec908847
title: Розділіть рядки у Bootstrap
challengeType: 0
forumTopicId: 18306
dashedName: split-your-bootstrap-row
---
# --description--
Тепер, коли ми маємо рядок Bootstrap, давайте розділимо його на дві колонки для того, шоб розмістити елементи.
Створіть два елементи у рядку `div`, обидва з класом `col-xs-6`.
# --hints--
Два елементи `div class="col-xs-6"` мають бути встановлені всередині вашого елементу `div class="row"`.
```js
assert($('div.row > div.col-xs-6').length > 1);
```
Всі елементи `div` повинні містити кінцеві теґи.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
</div>
</div>
```
# --solutions--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
```

202
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md Normal file
View File

@@ -0,0 +1,202 @@
---
id: bad87fee1348bd9aed908845
title: Стиль введення тексту як форма контролю
challengeType: 0
forumTopicId: 18312
required:
-
link: >-
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
raw: true
dashedName: style-text-inputs-as-form-controls
---
# --description--
Ви можете додати `fa-paper-plane` Font Awesome значок, додавши `<i class="fa fa-paper-plane"></i>` до пункту підтвердження вашого елементу `button`.
Надайте полю введення тексту форми класу, що знаходиться у `form-control`. Створіть кнопку надсилання своєї форми із класами `btn btn-primary`. Також надайте цій кнопці іконку `fa-paper-plane`.
Всі тексти `<input>`, `<textarea>`, і `<select>` елементи з класом `.form-control` мають в ширину 100%.
# --hints--
Кнопка відправлення у вашій формі повинна мати класи `btn btn-primary`.
```js
assert($('button[type="submit"]').hasClass('btn btn-primary'));
```
Ви повинні додати `<i class="fa fa-paper-plane"></i>` у ваш елемент кнопки `button`.
```js
assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
```
Текст `input` у вашій формі повинен мати клас `form-control`.
```js
assert($('input[type="text"]').hasClass('form-control'));
```
Кожен з ваших `i` елементів повинен мати кінцевий тег.
```js
assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></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://freecatphotoapp.com/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<input type="text" class="form-control" placeholder="cat photo URL" required>
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
</form>
</div>
```

167
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md Normal file
View File

@@ -0,0 +1,167 @@
---
id: bad87fee1348cd8acef08811
title: Спробуйте кольорову кнопку Bootsrap
challengeType: 0
forumTopicId: 18323
dashedName: taste-the-bootstrap-button-color-rainbow
---
# --description--
`btn-primary` - це базовий клас, який ви будете використовувати у вашому додатку. Це допомагає виділити дії, необхідні для вашого користувача.
Замініть клас Bootstrap `btn-default` за допомогою `btn-primary` на вашій кнопці.
Зверніть увагу, що для цієї кнопки також будуть необхідні класи `btn` та `btn-block`.
# --hints--
Кнопка повинна мати клас `btn-primary`.
```js
assert($('button').hasClass('btn-primary'));
```
Кнопка, як і раніше, повинна мати класи `btn` та `btn-block`.
```js
assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
```
Усі елементи `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
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-default btn-block">Like</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-primary btn-block">Like</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

185
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md Normal file
View File

@@ -0,0 +1,185 @@
---
id: bad87fee1348bd9aedf08845
title: Використання інтервалів для вибору вбудованих елементів
challengeType: 0
forumTopicId: 18370
dashedName: use-a-span-to-target-inline-elements
---
# --description--
Ви можете використовувати інтервали для того, щоб створити вбудовані елементи. Пам'ятаєте, коли ми використовували клас `btn-block` для того, щоб кнопка заповнювала весь рядок?
<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>звичайна кнопка</button>
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>кнопка блокування btn</button>
Це ілюструє різницю між "вбудованим" та "блок" елементом.
Використовуючи вбудований елемент `span`, ви можете поставити декілька елементів в один рядок, і навіть стилізувати його частини по-різному.
Використовуючи елемент `span`, вкладіть слово `love` у елемент `p`, що містить речення `Things cats love`. Після цього надайте елементу `span` клас `text-danger` для того, щоб змінити колір тексту на червоний.
Ось як ви можете зробити це для елемента `p`, що містить текст `Top 3 things cats hate`:
```html
<p>Top 3 things cats <span class="text-danger">hate:</span></p>
```
# --hints--
Ваш елемент `span` має знаходитись у елементі `p`.
```js
assert($('p span') && $('p span').length > 0);
```
Ваш елемент `span` має містити текст `love`.
```js
assert(
$('p span') &&
$('p span').text().match(/love/i) &&
!$('p span')
.text()
.match(/Things cats/i)
);
```
Ваш елемент `span` повинен мати клас `text-danger`.
```js
assert($('span').hasClass('text-danger'));
```
Ваш елемент `span` повинен мати кінцевий теґ.
```js
assert(
code.match(/<\/span>/g) &&
code.match(/<span/g) &&
code.match(/<\/span>/g).length === code.match(/<span/g).length
);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<h2 class="text-primary text-center">CatPhotoApp</h2>
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</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>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<h2 class="text-primary text-center">CatPhotoApp</h2>
<a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love</span>:</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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

98
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md Normal file
View File

@@ -0,0 +1,98 @@
---
id: bad87fee1348bd9aec908857
title: Використовуйте Примітки для уточнення коду
challengeType: 0
forumTopicId: 18347
dashedName: use-comments-to-clarify-code
---
# --description--
Під час роботи із jQuerzy ми видозмінимо елементи HTML таким чином, щоб нам не довелося змінювати їх у самому HTML.
Давайте впевнимося, що кожен знає, що не варто змінювати жоден з цих кодів напряму.
Потрібно пам'ятати, що розпочати примітку можна за допомогою`<!--`. А завершити`-->`
Додайте примітку на початку HTML, у якій вказано, що `Code below this line should not be changed`
# --hints--
Примітку варто розмістити над самим HTML, розпочавши її`<!--`.
```js
assert(code.match(/^\s*<!--/));
```
Примітка неодмінно має містити рядок`Code below this line should not be changed`.
```js
assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
```
Завершити примітку слід таким чином: `-->`.
```js
assert(code.match(/-->.*\n+.+/g));
```
Слід стежити, аби кількість символів на початку примітки збігалась із кількістю символів у кінці примітки.
```js
assert(code.match(/<!--/g).length === code.match(/-->/g).length);
```
# --seed--
## --seed-contents--
```html
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
```
# --solutions--
```html
<!-- Code below this line should not be changed -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
```

170
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md Normal file
View File

@@ -0,0 +1,170 @@
---
id: bad87fee1348bd9acde08712
title: Дотримуйтесь принципу Адаптивного веб дизайну при роботі із Fluid Containers у Bootstrap
challengeType: 0
forumTopicId: 18362
dashedName: use-responsive-design-with-bootstrap-fluid-containers
---
# --description--
У розділі freeCodeCamp, що стосувався роботи із HTML5 та CSS ми створили додаток Cat Photo. Тож давайте повернемося саме до нього. Цього разу, ми створюватимемо його дизайн, використовуючи популярний шаблон Bootstrap - фреймворк CSS із швидким реагуванням.
Bootstrap автоматично визначить ширину екрану і підлаштує розмір елементів HTML. Звідси і назва <dfn>адаптивний дизайн</dfn>.
З адаптивним дизайном немає необхідності розробляти мобільну версію вашого веб-сайту. Картинка адекватно відображатиметься на екранах з будь-якою шириною.
Можна внести Bootstrap до будь-якого додатка, додавши нижчезазначений код на початку вашого HTML:
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
```
У цьому випадку ми вже додали його для вас на цю сторінку за замовчуванням. Зауважимо, що можна використати як `>`, так і `/>`, щоб закрити теґ `link`.
Для початку слід вкласти весь HTML (окрім теґу `link` та елемента `style`) в елемент `div` з класом `container-fluid`.
# --hints--
Ваш елемент `div` має мати клас `container-fluid`.
```js
assert($('div').hasClass('container-fluid'));
```
Ваш елемент `div` має мати кінцевий теґ.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
Всі елементи HTML після кінцевого теґу `style` треба вкласти в `.container-fluid`.
```js
assert($('.container-fluid').children().length >= 8 && !$('.container-fluid').has("style").length && !$('.container-fluid').has("link").length);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" 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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" 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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

196
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md Normal file
View File

@@ -0,0 +1,196 @@
---
id: bad88fee1348ce8acef08815
title: Використовуйте Bootstrap сітку, щоб розмістити елементи поряд
challengeType: 0
forumTopicId: 18371
dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
---
# --description--
Bootstrap використовує систему адаптивної сітки в 12 стовпців, що полегшує розміщення елементів рядками та визначення ширини кожного елементу. Більшість Bootstrap класів можна застосувати до елементу `div`.
Bootstrap має різні атрибути ширини стовпчика, які він використовує залежно від ширини екрану користувача. Наприклад, у телефонів екрани вузькі, а у ноутбуків- широкі.
Наприклад, візьмемо клас `col-md-*` Bootstrap- у. Тут `md` означає середину, а `*`- це число, що визначає, скільки колонок має займати елемент. В такому разі вказується ширина колонки елементу на екрані середнього розміру, на кшталт екрану ноутбука.
Для роботи над додатком Cat Photo, ми використовуватимемо `col-xs-*`, де `xs` означає "дуже маленький" (дуже маленький екран телефону), а `*`- це число колонок, що вказує скільки колонок має займати елемент.
Послідовно додайте кнопки `Like`, `Info` і `Delete`, укладіть їх в один елемент `<div class="row">`, а потім кожен окремо в елемент `<div class="col-xs-4">`.
Клас `row` застосовують до `div`, а самі кнопки можна вкласти в нього.
# --hints--
Ваші кнопки мають знаходитися в одному й тому ж самому елементі `div` з класом `row`.
```js
assert($('div.row:has(button)').length > 0);
```
Кожна кнопка Bootstrap має вкладатися в свій власний елемент `div` з класом `col-xs-4`.
```js
assert($('div.col-xs-4:has(button)').length > 2);
```
Кожен з елементів `button` повинен мати кінцевий теґ.
```js
assert(
code.match(/<\/button>/g) &&
code.match(/<button/g) &&
code.match(/<\/button>/g).length === code.match(/<button/g).length
);
```
Кожен елемент `div` повинен мати кінцевий теґ.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/<div/g) &&
code.match(/<\/div>/g).length === code.match(/<div/g).length
);
```
# --seed--
## --seed-contents--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-danger">Delete</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</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>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```

176
curriculum/challenges/ukrainian/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md Normal file
View File

@@ -0,0 +1,176 @@
---
id: bad87fee1348ce8acef08814
title: Попередьте користувачів вашого сайту про небезпечну дію за допомогою btn-danger
challengeType: 0
forumTopicId: 18375
dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
---
# --description--
Bootstrap має набір заздалегідь встановлених кольорів для кнопок. Клас `btn-danger` – колір кнопки, який ви можна застосувати для того, щоб оповістити користувачів, що ця кнопка виконує руйнівну дію, наприклад, видаляє фото котика.
Створіть кнопку з текстом `Delete` і надайте їй клас `btn-danger`.
Зверніть увагу, цим кнопкам все ще необхідні класи `btn` та `btn-block`.
# --hints--
Створіть новий елемент `button` з текстом `Delete`.
```js
assert(new RegExp('Delete', 'gi').test($('button').text()));
```
Усі кнопки Bootstrap повинні мати класи `btn` і `btn-block`.
```js
assert($('button.btn-block.btn').length > 2);
```
Нова кнопка повинна мати клас `btn-danger`.
```js
assert($('button').hasClass('btn-danger'));
```
Усі елементи `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
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```
# --solutions--
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>
<div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-danger">Delete</button>
<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://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
```