fix(curriculum): fix challenges for russian language
This commit is contained in:
Valeriy S
mrugesh
@@ -2,31 +2,34 @@
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Add a Submit Button to a Form
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cp2Nkhz
|
||||
forumTopicId: 16627
|
||||
localeTitle: Добавить кнопку отправки в форму
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Давайте добавим кнопку <code>submit</code> в вашу форму. Нажатие этой кнопки отправит данные из вашей формы по URL-адресу, указанному вами с помощью атрибута формы <code>action</code> . Вот пример кнопки отправки: <code><button type="submit">this button submits the form</button></code> </section>
|
||||
<section id='description'>
|
||||
Давайте добавим кнопку <code>submit</code> в вашу форму. Нажатие этой кнопки отправит данные из вашей формы по URL-адресу, указанному вами с помощью атрибута формы <code>action</code> . Вот пример кнопки отправки: <code><button type="submit">this button submits the form</button></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте кнопку в качестве последнего элемента вашего элемента <code>form</code> с типом <code>submit</code> и «Отправить» в качестве текста. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте кнопку в качестве последнего элемента вашего элемента <code>form</code> с типом <code>submit</code> и «Отправить» в качестве текста.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваша форма должна иметь кнопку внутри.
|
||||
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
|
||||
|
||||
- text: 'Кнопка отправки должна иметь <code>type</code> атрибут, установленный для <code>submit</code> .'
|
||||
|
||||
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
|
||||
- text: Кнопка отправки должна содержать только текст «Отправить».
|
||||
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>button</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'
|
||||
- text: Your form should have a button inside it.
|
||||
testString: assert($("form").children("button").length > 0);
|
||||
- text: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.
|
||||
testString: assert($("button").attr("type") === "submit");
|
||||
- text: Your submit button should only have the text "Submit".
|
||||
testString: assert($("button").text().match(/^\s*submit\s*$/gi));
|
||||
- text: Make sure your <code>button</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||
|
||||
```
|
||||
|
||||
@@ -65,14 +68,35 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" 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="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,32 @@
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Add Images to Your Website
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/c8EbJf2
|
||||
forumTopicId: 16640
|
||||
localeTitle: Добавьте изображения на свой сайт
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете добавлять изображения на свой сайт с помощью элемента <code>img</code> и указывать URL-адрес определенного изображения, используя атрибут <code>src</code> . Примером этого может быть: <code><img src="https://www.your-image-source.com/your-image.jpg"></code> Обратите внимание, что элементы <code>img</code> самозакрываются. Все элементы <code>img</code> <strong>должны</strong> иметь атрибут <code>alt</code> . Текст внутри атрибута <code>alt</code> используется для чтения с экрана для улучшения доступности и отображается в виде текста, если изображение не загружается. Примечание. Если изображение является чисто декоративным, использование чистого атрибута <code>alt</code> является наилучшей практикой. В идеале атрибут <code>alt</code> не должен содержать специальных символов, если это не требуется. Давайте добавим атрибут <code>alt</code> к нашему примеру <code>img</code> выше: <code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code> </section>
|
||||
<section id='description'>
|
||||
Вы можете добавлять изображения на свой сайт с помощью элемента <code>img</code> и указывать URL-адрес определенного изображения, используя атрибут <code>src</code> . Примером этого может быть: <code><img src="https://www.your-image-source.com/your-image.jpg"></code> Обратите внимание, что элементы <code>img</code> самозакрываются. Все элементы <code>img</code> <strong>должны</strong> иметь атрибут <code>alt</code> . Текст внутри атрибута <code>alt</code> используется для чтения с экрана для улучшения доступности и отображается в виде текста, если изображение не загружается. Примечание. Если изображение является чисто декоративным, использование чистого атрибута <code>alt</code> является наилучшей практикой. В идеале атрибут <code>alt</code> не должен содержать специальных символов, если это не требуется. Давайте добавим атрибут <code>alt</code> к нашему примеру <code>img</code> выше: <code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Попробуем добавить изображение на наш сайт: вставьте тег <code>img</code> перед элементом <code>h2</code> . Теперь установите атрибут <code>src</code> так, чтобы он указывал на этот url: <code>https://bit.ly/fcc-relaxing-cat</code> Наконец, не забудьте дать вашему изображению текст <code>alt</code> . </section>
|
||||
<section id='instructions'>
|
||||
Попробуем добавить изображение на наш сайт: вставьте тег <code>img</code> перед элементом <code>h2</code> . Теперь установите атрибут <code>src</code> так, чтобы он указывал на этот url: <code>https://bit.ly/fcc-relaxing-cat</code> Наконец, не забудьте дать вашему изображению текст <code>alt</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваша страница должна иметь элемент изображения.
|
||||
testString: 'assert($("img").length > 0, "Your page should have an image element.");'
|
||||
- text: У вашего изображения должен быть атрибут <code>src</code>, который указывает на изображение котенка.
|
||||
testString: 'assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), "Your image should have a <code>src</code> attribute that points to the kitten image.");'
|
||||
- text: Элемент изображения <strong>должен</strong> иметь атрибут <code>alt</code> .
|
||||
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");'
|
||||
- text: Your page should have an image element.
|
||||
testString: assert($("img").length);
|
||||
- text: Your image should have a <code>src</code> attribute that points to the kitten image.
|
||||
testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
|
||||
- text: Your image element's <code>alt</code> attribute <strong>must</strong> not be empty.
|
||||
testString: assert($("img").attr("alt") && $("img").attr("alt").length && /<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(code.replace(/\s/g,'')));
|
||||
|
||||
```
|
||||
|
||||
@@ -46,14 +51,18 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,34 @@
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Add Placeholder Text to a Text Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cKdJDhg
|
||||
forumTopicId: 16647
|
||||
localeTitle: Добавить текст для placeholder в текстовое поле
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Текст placeholder'а - это то, что отображается в вашем элементе <code>input</code> до того, как ваш пользователь ввел что-либо. Вы можете создать текст placeholder'а следующим образом: <code><input type="text" placeholder="this is placeholder text"></code> </section>
|
||||
<section id='description'>
|
||||
Текст placeholder'а - это то, что отображается в вашем элементе <code>input</code> до того, как ваш пользователь ввел что-либо. Вы можете создать текст placeholder'а следующим образом: <code><input type="text" placeholder="this is placeholder text"></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте значение <code>placeholder</code> вашего <code>input</code> текста «URL-адрес кота». </section>
|
||||
<section id='instructions'>
|
||||
Задайте значение <code>placeholder</code> вашего <code>input</code> текста «URL-адрес кота».
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Добавьте атрибут <code>placeholder</code> в существующий элемент <code>input</code> текста.
|
||||
testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
|
||||
- text: Установите для атрибута placeholder значение «URL-адрес кота».
|
||||
testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
|
||||
- text: Готовый элемент <code>input</code> должен иметь действительный синтаксис.
|
||||
testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'
|
||||
- text: Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.
|
||||
testString: assert($("input[placeholder]").length > 0);
|
||||
- text: Set the value of your placeholder attribute to "cat photo URL".
|
||||
testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi));
|
||||
- text: The finished <code>input</code> element should not have a closing tag.
|
||||
testString: assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
- text: The finished <code>input</code> element should have valid syntax.
|
||||
testString: assert($("input[type=text]").length > 0);
|
||||
|
||||
```
|
||||
|
||||
@@ -59,14 +66,32 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Check Radio Buttons and Checkboxes by Default
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cWk3Qh6
|
||||
forumTopicId: 301094
|
||||
localeTitle: Сделайте радиокнопки и чекбоксы включенными по умолчанию
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете сделать чекбокс или радиокнопку включенными по умолчанию с помощью атрибута <code>checked</code>. Для этого просто добавьте слово "checked" во внутреннюю часть тега input. Например: <code<input type="radio" name="test-name" checked></code> </section>
|
||||
<section id='description'>
|
||||
Вы можете сделать чекбокс или радиокнопку включенными по умолчанию с помощью атрибута <code>checked</code>. Для этого просто добавьте слово "checked" во внутреннюю часть тега input. Например: <code<input type="radio" name="test-name" checked></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Настройте первую из ваших <code>radio buttons</code> и первый из ваших <code>checkboxes</code> так чтобы они были отмеченны по умолчанию. </section>
|
||||
<section id='instructions'>
|
||||
Настройте первую из ваших <code>radio buttons</code> и первый из ваших <code>checkboxes</code> так чтобы они были отмеченны по умолчанию.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш первый переключатель в вашей форме должен быть отмечен по умолчанию.
|
||||
testString: 'assert($("input[type="radio"]").prop("checked"), "Your first radio button on your form should be checked by default.");'
|
||||
- text: Ваш первый флажок в вашей форме должен быть отмечен по умолчанию.
|
||||
testString: 'assert($("input[type="checkbox"]").prop("checked"), "Your first checkbox on your form should be checked by default.");'
|
||||
- text: Your first radio button on your form should be checked by default.
|
||||
testString: assert($('input[type="radio"]').prop("checked"));
|
||||
- text: Your first checkbox on your form should be checked by default.
|
||||
testString: assert($('input[type="checkbox"]').prop("checked"));
|
||||
|
||||
```
|
||||
|
||||
@@ -51,11 +56,11 @@ tests:
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
@@ -65,14 +70,40 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" 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="/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,31 +2,36 @@
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Comment out HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cGyGbca
|
||||
forumTopicId: 16782
|
||||
localeTitle: Комментарий HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Помните, что для того, чтобы начать комментарий, вам нужно использовать <code><!--</code> и для завершения комментария, вам нужно использовать <code>--></code> Здесь вам нужно будет закончить комментарий до того, как начнется ваш элемент <code>h2</code> . </section>
|
||||
<section id='description'>
|
||||
Помните, что для того, чтобы начать комментарий, вам нужно использовать <code><!--</code> и для завершения комментария, вам нужно использовать <code>--></code> Здесь вам нужно будет закончить комментарий до того, как начнется ваш элемент <code>h2</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Вы можете комментровать элементы <code>h1</code> и <code>p</code> , но не элемент <code>h2</code> . </section>
|
||||
<section id='instructions'>
|
||||
Вы можете комментровать элементы <code>h1</code> и <code>p</code> , но не элемент <code>h2</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Прокомментируйте свой элемент <code>h1</code> чтобы он не был виден на вашей странице.
|
||||
testString: 'assert(($("h1").length === 0), "Comment out your <code>h1</code> element so that it is not visible on your page.");'
|
||||
- text: 'Оставьте свой <code>h2</code> элемент раскомментированным, чтобы он был виден на вашей странице.'
|
||||
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
|
||||
- text: Прокомментируйте свой элемент <code>p</code> чтобы он не был виден на вашей странице.
|
||||
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
|
||||
- text: Не забудьте закрыть каждый из ваших комментариев с помощью <code>--></code> .
|
||||
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--></code>.");'
|
||||
- text: Не изменяйте порядок <code>h1</code> <code>h2</code> или <code>p</code> в коде.
|
||||
testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'
|
||||
- text: Comment out your <code>h1</code> element so that it is not visible on your page.
|
||||
testString: assert(($("h1").length === 0));
|
||||
- text: Leave your <code>h2</code> element uncommented so that it is visible on your page.
|
||||
testString: assert(($("h2").length > 0));
|
||||
- text: Comment out your <code>p</code> element so that it is not visible on your page.
|
||||
testString: assert(($("p").length === 0));
|
||||
- text: Be sure to close each of your comments with <code>--></code>.
|
||||
testString: assert(code.match(/[^fc]-->/g).length > 1);
|
||||
- text: Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.
|
||||
testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") );
|
||||
|
||||
```
|
||||
|
||||
@@ -50,14 +55,15 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<!--<h1>Hello World</h1>-->
|
||||
<h2>CatPhotoApp</h2>
|
||||
<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,31 +2,36 @@
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Create a Bulleted Unordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cDKVPuv
|
||||
forumTopicId: 16814
|
||||
localeTitle: Создать маркированный неупорядоченный список
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML имеет специальный элемент для создания <code>unordered lists</code> или списков стилей в стиле пули. Неупорядоченные списки начинаются с элемента открытия <code><ul></code> , за которым следует любое количество элементов <code><li></code> . Наконец, неупорядоченные списки закрываются с помощью <code></ul></code> Например: <blockquote> <UL> <br> <Li> молоко </ li> <br> <Li> сыр </ li> <br> </ UL> </blockquote> создаст список стиля пули «молоко» и «сыр». </section>
|
||||
<section id='description'>
|
||||
HTML имеет специальный элемент для создания <code>unordered lists</code> или списков стилей в стиле пули. Неупорядоченные списки начинаются с элемента открытия <code><ul></code> , за которым следует любое количество элементов <code><li></code> . Наконец, неупорядоченные списки закрываются с помощью <code></ul></code> Например: <blockquote> <UL> <br> <Li> молоко </ li> <br> <Li> сыр </ li> <br> </ UL> </blockquote> создаст список стиля пули «молоко» и «сыр».
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Удалите последние два элемента <code>p</code> и создайте неупорядоченный список из трех вещей, которые любят кошки в нижней части страницы. </section>
|
||||
<section id='instructions'>
|
||||
Удалите последние два элемента <code>p</code> и создайте неупорядоченный список из трех вещей, которые любят кошки в нижней части страницы.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Создайте элемент <code>ul</code> .
|
||||
testString: 'assert($("ul").length > 0, "Create a <code>ul</code> element.");'
|
||||
- text: У вас должно быть три элемента <code>li</code> в вашем элементе <code>ul</code> .
|
||||
testString: 'assert($("ul li").length > 2, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>ul</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- text: 'Убедитесь, что ваши элементы <code>li</code> закрывают теги.'
|
||||
testString: 'assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length, "Make sure your <code>li</code> elements have closing tags.");'
|
||||
- text: Убедитесь, что ваши элементы <code>li</ code> не содержат пустую строку или только пробел.
|
||||
testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0, 'Make sure your <code>li</code> elements don\’t contain an empty string or only white-space.');
|
||||
- text: Create a <code>ul</code> element.
|
||||
testString: assert($("ul").length > 0);
|
||||
- text: You should have three <code>li</code> elements within your <code>ul</code> element.
|
||||
testString: assert($("ul li").length > 2);
|
||||
- text: Make sure your <code>ul</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length);
|
||||
- text: Make sure your <code>li</code> elements have closing tags.
|
||||
testString: assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length);
|
||||
- text: Make sure your <code>li</code> elements don’t contain an empty string or only white-space.
|
||||
testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
|
||||
```
|
||||
|
||||
@@ -52,14 +57,24 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>mice</li>
|
||||
<li>catnip</li>
|
||||
</ul>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,32 @@
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Create a Form Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cmQ3Kfa
|
||||
forumTopicId: 16817
|
||||
localeTitle: Создание элемента формы
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете создавать веб-формы, которые фактически отправляют данные на сервер, используя не что иное, как чистый HTML. Вы можете сделать это, указав действие в элементе <code>form</code> . Например: <code><form action="/url-where-you-want-to-submit-form-data"></form></code> </section>
|
||||
<section id='description'>
|
||||
Вы можете создавать веб-формы, которые фактически отправляют данные на сервер, используя не что иное, как чистый HTML. Вы можете сделать это, указав действие в элементе <code>form</code> . Например: <code><form action="/url-where-you-want-to-submit-form-data"></form></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Заглушите свое текстовое поле внутри элемента <code>form</code> и добавьте атрибут <code>action="/submit-cat-photo"</code> в элемент формы. </section>
|
||||
<section id='instructions'>
|
||||
Заглушите свое текстовое поле внутри элемента <code>form</code> и добавьте атрибут <code>action="/submit-cat-photo"</code> в элемент формы.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Вставьте элемент ввода текста в элемент <code>form</code> .
|
||||
testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a <code>form</code> element.");'
|
||||
- text: 'Убедитесь, что ваша <code>form</code> имеет атрибут <code>action</code> который установлен в <code>/submit-cat-photo</code>'
|
||||
testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>form</code> имеет хорошо сформированные открытые и закрытые метки.'
|
||||
testString: 'assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length, "Make sure your <code>form</code> element has well-formed open and close tags.");'
|
||||
- text: Nest your text input element within a <code>form</code> element.
|
||||
testString: assert($("form") && $("form").children("input") && $("form").children("input").length > 0);
|
||||
- text: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>
|
||||
testString: assert($("form").attr("action") === "/submit-cat-photo");
|
||||
- text: Make sure your <code>form</code> element has well-formed open and close tags.
|
||||
testString: assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length);
|
||||
|
||||
```
|
||||
|
||||
@@ -59,14 +64,34 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" 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="/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,36 @@
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Create a Set of Checkboxes
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cqrkJsp
|
||||
forumTopicId: 16821
|
||||
localeTitle: Создайте чекбоксы
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В формах обычно используют <code>checkboxes</code>'ы для вопросов, которые могут иметь более одного ответа. Чекбокс - это тип <code>input</code> Каждый из ваших чекбоксов может быть вложен в свой собственный элемент <code>label</code> . Обернув элемент <code>input</code> элементом <code>label</code> вы автоматически свяжете этот чекбокс с элементом <code>label</code>, который окружает его. Все связанные с ним флажки должны иметь одинаковый атрибут <code>name</code> . Считается лучшей практикой явно определить отношения между <code>input</code> с типом чекбокс и соответствующим <code>label</code>, установив атрибут <code>for</code> на <code>label</code> элемента в соответствии с <code>id</code> атрибута соответствующего <code>input</code> элемента. Вот пример чекбокса: <code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code> </section>
|
||||
<section id='description'>
|
||||
В формах обычно используют <code>checkboxes</code>'ы для вопросов, которые могут иметь более одного ответа. Чекбокс - это тип <code>input</code> Каждый из ваших чекбоксов может быть вложен в свой собственный элемент <code>label</code> . Обернув элемент <code>input</code> элементом <code>label</code> вы автоматически свяжете этот чекбокс с элементом <code>label</code>, который окружает его. Все связанные с ним флажки должны иметь одинаковый атрибут <code>name</code> . Считается лучшей практикой явно определить отношения между <code>input</code> с типом чекбокс и соответствующим <code>label</code>, установив атрибут <code>for</code> на <code>label</code> элемента в соответствии с <code>id</code> атрибута соответствующего <code>input</code> элемента. Вот пример чекбокса: <code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте в свою форму набор из трех чекбоксов. Каждый чекбокс должен быть вложен в свой собственный элемент <code>label</code> . Всем трем чекбоксам присвойте атрибут <code>name</code> со значением <code>personality</code>. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте в свою форму набор из трех чекбоксов. Каждый чекбокс должен быть вложен в свой собственный элемент <code>label</code> . Всем трем чекбоксам присвойте атрибут <code>name</code> со значением <code>personality</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: На вашей странице должно быть три элемента флажка.
|
||||
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
|
||||
- text: Каждый из трех элементов флажка должен быть вложен в свой собственный элемент <code>label</code> .
|
||||
testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
|
||||
- text: 'Убедитесь, что каждый из ваших элементов <code>label</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: Дайте Флажки на <code>name</code> атрибута <code>personality</code> .
|
||||
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'
|
||||
- text: Your page should have three checkbox elements.
|
||||
testString: assert($('input[type="checkbox"]').length > 2);
|
||||
- text: Each of your three checkbox elements should be nested in its own <code>label</code> element.
|
||||
testString: assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
- text: Make sure each of your <code>label</code> elements has a closing tag.
|
||||
testString: assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length);
|
||||
- text: Give your checkboxes the <code>name</code> attribute of <code>personality</code>.
|
||||
testString: assert($('label > input[type="checkbox"]').filter('[name="personality"]').length > 2);
|
||||
- text: Each of your checkboxes should be added within the <code>form</code> tag.
|
||||
testString: assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
|
||||
```
|
||||
|
||||
@@ -66,14 +73,42 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" 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="/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox"
|
||||
name="personality">Lazy</label>
|
||||
<label for="evil"><input id="evil" type="checkbox"
|
||||
name="personality">Evil</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,35 +2,40 @@
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Create a Set of Radio Buttons
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cNWKvuR
|
||||
forumTopicId: 16822
|
||||
localeTitle: Создайте радиокнопки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете использовать <code>radio buttons</code> для вопросов, в которых вы хотите, чтобы пользователь дал вам один ответ из нескольких вариантов. Кнопки радио - это тип <code>input</code> . Каждая из ваших радиокнопок может быть вложена в свой собственный элемент <code>label</code> . Обернув элемент <code>input</code> в элемент <code>label</code> вы автоматически свяжете радиокнопку с окружающим ее элементом label. Все связанные радиокнопки должны иметь одинаковый атрибут <code>name</code> для создания группы переключателей. Создавая группу радиокнопок, при выборе любой одной радиокнопки автоматически отменяется выбор других радиокнопок в пределах одной группы, разрешая пользователю только один ответ. Вот пример переключателя: <blockquote> <label> <br> <input type = "radio" name = "indoor-outdoor"> Indoor <br> </label> </blockquote> Рекомендуется использовать атрибут <code>for</code> тега <code>label</code> со значением, которое соответствует значению атрибута <code>id</code> <code>input</code> элемента. Это позволяет вспомогательным технологиям создавать взаимосвязанные отношения между label и элементом <code>input</code> . Например: <blockquote> <label for = "indoor"> <br> <input id = "indoor" type = "radio" name = "indoor-outdoor"> Indoor <br> </label> </blockquote></section>
|
||||
<section id='description'>
|
||||
Вы можете использовать <code>radio buttons</code> для вопросов, в которых вы хотите, чтобы пользователь дал вам один ответ из нескольких вариантов. Кнопки радио - это тип <code>input</code> . Каждая из ваших радиокнопок может быть вложена в свой собственный элемент <code>label</code> . Обернув элемент <code>input</code> в элемент <code>label</code> вы автоматически свяжете радиокнопку с окружающим ее элементом label. Все связанные радиокнопки должны иметь одинаковый атрибут <code>name</code> для создания группы переключателей. Создавая группу радиокнопок, при выборе любой одной радиокнопки автоматически отменяется выбор других радиокнопок в пределах одной группы, разрешая пользователю только один ответ. Вот пример переключателя: <blockquote> <label> <br> <input type = "radio" name = "indoor-outdoor"> Indoor <br> </label> </blockquote> Рекомендуется использовать атрибут <code>for</code> тега <code>label</code> со значением, которое соответствует значению атрибута <code>id</code> <code>input</code> элемента. Это позволяет вспомогательным технологиям создавать взаимосвязанные отношения между label и элементом <code>input</code> . Например: <blockquote> <label for = "indoor"> <br> <input id = "indoor" type = "radio" name = "indoor-outdoor"> Indoor <br> </label> </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте пару радиокнопок в вашу форму, каждая из которых вложена в свой собственный элемент label. Нужно иметь возможность <code>indoor</code> а у другого - возможность <code>outdoor</code> . Оба должны совместно использовать атрибут <code>name</code> <code>indoor-outdoor</code> чтобы создать группу радиокнопок. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте пару радиокнопок в вашу форму, каждая из которых вложена в свой собственный элемент label. Нужно иметь возможность <code>indoor</code> а у другого - возможность <code>outdoor</code> . Оба должны совместно использовать атрибут <code>name</code> <code>indoor-outdoor</code> чтобы создать группу радиокнопок.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: На вашей странице должно быть два элемента переключателя.
|
||||
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
|
||||
- text: Дайте ваше радио кнопки на <code>name</code> атрибут <code>indoor-outdoor</code> .
|
||||
testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
|
||||
- text: Каждый из ваших двух элементов переключателя должен быть вложен в свой собственный элемент <code>label</code> .
|
||||
testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
|
||||
- text: 'Убедитесь, что каждый из ваших элементов <code>label</code> имеет закрывающий тег.'
|
||||
testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: Один из ваших переключателей должен иметь ярлык в <code>indoor</code> .
|
||||
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
|
||||
- text: Один из ваших переключателей должен иметь ярлык на <code>outdoor</code> .
|
||||
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
|
||||
- text: Каждый элемент вашего переключателя должен быть добавлен в тег <code>form</code> .
|
||||
testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'
|
||||
- text: Your page should have two radio button elements.
|
||||
testString: assert($('input[type="radio"]').length > 1);
|
||||
- text: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.
|
||||
testString: assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
- text: Each of your two radio button elements should be nested in its own <code>label</code> element.
|
||||
testString: assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
- text: Make sure each of your <code>label</code> elements has a closing tag.
|
||||
testString: assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length));
|
||||
- text: One of your radio buttons should have the label <code>indoor</code>.
|
||||
testString: assert($("label").text().match(/indoor/gi));
|
||||
- text: One of your radio buttons should have the label <code>outdoor</code>.
|
||||
testString: assert($("label").text().match(/outdoor/gi));
|
||||
- text: Each of your radio button elements should be added within the <code>form</code> tag.
|
||||
testString: assert($("label").parent().get(0).tagName.match('FORM'));
|
||||
|
||||
```
|
||||
|
||||
@@ -70,14 +75,37 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" 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="/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Create a Text Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/c2EVnf6
|
||||
forumTopicId: 16823
|
||||
localeTitle: Создание текстового поля
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Теперь давайте создадим веб-форму. Элементы ввода - удобный способ ввода данных от пользователя. Вы можете создать текстовый ввод следующим образом: <code><input type="text"></code> Обратите внимание, что <code>input</code> элементы самозакрываются. </section>
|
||||
<section id='description'>
|
||||
Теперь давайте создадим веб-форму. Элементы ввода - удобный способ ввода данных от пользователя. Вы можете создать текстовый ввод следующим образом: <code><input type="text"></code> Обратите внимание, что <code>input</code> элементы самозакрываются.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте <code>input</code> элемент типа <code>text</code> ниже списков. </section>
|
||||
<section id='instructions'>
|
||||
Создайте <code>input</code> элемент типа <code>text</code> ниже списков.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваше приложение должно иметь <code>input</code> элемент типа <code>text</code> .
|
||||
testString: 'assert($("input[type=text]").length > 0, "Your app should have an <code>input</code> element of type <code>text</code>.");'
|
||||
- text: Your app should have an <code>input</code> element of type <code>text</code>.
|
||||
testString: assert($("input[type=text]").length > 0);
|
||||
|
||||
```
|
||||
|
||||
@@ -56,14 +61,34 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form>
|
||||
<input type="text">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,48 @@
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Create an Ordered List
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cQ3B8TM
|
||||
forumTopicId: 16824
|
||||
localeTitle: Создание упорядоченного списка
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML имеет еще один специальный элемент для создания <code>ordered lists</code> или нумерованных списков. Упорядоченные списки начинаются с элемента <code><ol></code> , за которым следует любое количество элементов <code><li></code>. Наконец, упорядоченные списки закрываются с помощью <code></ol></code> Например: <blockquote> <ol> <br> <Li> Гарфилд </ li> <br> <Li> Сильвестр </ li> <br> </ ol> </blockquote> создаст нумерованный список «Гарфилд» и «Сильвестр». </section>
|
||||
<section id='description'>
|
||||
HTML имеет еще один специальный элемент для создания <code>ordered lists</code> или нумерованных списков. Упорядоченные списки начинаются с элемента <code><ol></code> , за которым следует любое количество элементов <code><li></code>. Наконец, упорядоченные списки закрываются с помощью <code></ol></code> Например: <blockquote> <ol> <br> <Li> Гарфилд </ li> <br> <Li> Сильвестр </ li> <br> </ ol> </blockquote> создаст нумерованный список «Гарфилд» и «Сильвестр».
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте упорядоченный список из 3 лучших вещей, которые кошки ненавидят больше всего. </section>
|
||||
<section id='instructions'>
|
||||
Создайте упорядоченный список из 3 лучших вещей, которые кошки ненавидят больше всего.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'У вас должен быть упорядоченный список для «Топ-3 вещей, которые ненавидят кошки:»'
|
||||
testString: 'assert((/Top 3 things cats hate:/i).test($("ol").prev().text()), "You should have an ordered list for "Top 3 things cats hate:"");'
|
||||
- text: 'У вас должен быть неупорядоченный список «Вещи, которые любят кошки»:'
|
||||
testString: 'assert((/Things cats love:/i).test($("ul").prev().text()), "You should have an unordered list for "Things cats love:"");'
|
||||
- text: У вас должен быть только один элемент <code>ul</code> .
|
||||
testString: 'assert.equal($("ul").length, 1, "You should have only one <code>ul</code> element.");'
|
||||
- text: У вас должен быть только один элемент <code>ol</code> .
|
||||
testString: 'assert.equal($("ol").length, 1, "You should have only one <code>ol</code> element.");'
|
||||
- text: У вас должно быть три элемента <code>li</code> в вашем элементе <code>ul</code> .
|
||||
testString: 'assert.equal($("ul li").length, 3, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: У вас должно быть три элемента <code>li</code> внутри вашего элемента <code>ol</code> .
|
||||
testString: 'assert.equal($("ol li").length, 3, "You should have three <code>li</code> elements within your <code>ol</code> element.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>ul</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>ol</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length, "Make sure your <code>ol</code> element has a closing tag.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>li</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length, "Make sure your <code>li</code> element has a closing tag.");'
|
||||
- text: You should have an ordered list for "Top 3 things cats hate:"
|
||||
testString: assert((/Top 3 things cats hate:/i).test($("ol").prev().text()));
|
||||
- text: You should have an unordered list for "Things cats love:"
|
||||
testString: assert((/Things cats love:/i).test($("ul").prev().text()));
|
||||
- text: You should have only one <code>ul</code> element.
|
||||
testString: assert.equal($("ul").length, 1);
|
||||
- text: You should have only one <code>ol</code> element.
|
||||
testString: assert.equal($("ol").length, 1);
|
||||
- text: You should have three <code>li</code> elements within your <code>ul</code> element.
|
||||
testString: assert.equal($("ul li").length, 3);
|
||||
- text: You should have three <code>li</code> elements within your <code>ol</code> element.
|
||||
testString: assert.equal($("ol li").length, 3);
|
||||
- text: Make sure your <code>ul</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length);
|
||||
- text: Make sure your <code>ol</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length);
|
||||
- text: Make sure your <code>li</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length);
|
||||
- text: The <code>li</code> elements in your unordered list should not be empty.
|
||||
testString: $('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, '')));
|
||||
- text: The <code>li</code> elements in your ordered list should not be empty.
|
||||
testString: $('ol li').each((i, val) => assert(!!val.textContent.replace(/\s/g, '')));
|
||||
|
||||
```
|
||||
|
||||
@@ -66,14 +75,31 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>hate 1</li>
|
||||
<li>hate 2</li>
|
||||
<li>hate 3</li>
|
||||
</ol>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,32 @@
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Declare the Doctype of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cra98AJ
|
||||
forumTopicId: 301095
|
||||
localeTitle: Объявить Doctype HTML-документа
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Упражнения до сих пор охватывали конкретные элементы HTML и их использование. Однако есть несколько элементов, которые дают общую структуру вашей странице и должны быть включены в каждый HTML-документ. В верхней части документа вам нужно указать браузеру, какую версию HTML использует ваша страница. HTML развивающийся язык и регулярно обновляется. Большинство браузеров поддерживают самую последнюю спецификацию—HTML5, но старые веб-страницы могут использовать предыдущие версии языка. Чтобы сообщить браузеру какую версию HTML использовать нужно добавить следующий тег в первую строку вашего документа <code><!DOCTYPE ...></code> , где « <code>...</code> » - это версия HTML. Для HTML5 вы используете <code><!DOCTYPE html></code> . <code>!</code> и <code>DOCTYPE</code> должно быть написано заглавными буквами, особенно для старых браузеров. Далее, весь ваш HTML-код необходимо обернуть в теги <code>html</code> . Открытие <code><html></code> идет непосредственно под линией <code><!DOCTYPE html></code> , а закрытие <code></html></code> идет в конце страницы. Вот пример структуры страницы: <blockquote> <! DOCTYPE html> <br> <HTML> <br> <! - Ваш HTML-код идет здесь -> <br> </ Html> </blockquote></section>
|
||||
<section id='description'>
|
||||
Упражнения до сих пор охватывали конкретные элементы HTML и их использование. Однако есть несколько элементов, которые дают общую структуру вашей странице и должны быть включены в каждый HTML-документ. В верхней части документа вам нужно указать браузеру, какую версию HTML использует ваша страница. HTML развивающийся язык и регулярно обновляется. Большинство браузеров поддерживают самую последнюю спецификацию—HTML5, но старые веб-страницы могут использовать предыдущие версии языка. Чтобы сообщить браузеру какую версию HTML использовать нужно добавить следующий тег в первую строку вашего документа <code><!DOCTYPE ...></code> , где « <code>...</code> » - это версия HTML. Для HTML5 вы используете <code><!DOCTYPE html></code> . <code>!</code> и <code>DOCTYPE</code> должно быть написано заглавными буквами, особенно для старых браузеров. Далее, весь ваш HTML-код необходимо обернуть в теги <code>html</code> . Открытие <code><html></code> идет непосредственно под линией <code><!DOCTYPE html></code> , а закрытие <code></html></code> идет в конце страницы. Вот пример структуры страницы: <blockquote> <! DOCTYPE html> <br> <HTML> <br> <! - Ваш HTML-код идет здесь -> <br> </ Html> </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте тег <code>DOCTYPE</code> для HTML5 в начало пустого документа HTML в редакторе кода. Под ним добавьте открывающие и закрывающие теги <code>html</code> , которые обертывают вокруг элемента <code>h1</code> . Заголовок может включать любой текст. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте тег <code>DOCTYPE</code> для HTML5 в начало пустого документа HTML в редакторе кода. Под ним добавьте открывающие и закрывающие теги <code>html</code> , которые обертывают вокруг элемента <code>h1</code> . Заголовок может включать любой текст.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать <code><!DOCTYPE html></code> .
|
||||
testString: 'assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi), "Your code should include a <code><!DOCTYPE html></code> tag.");'
|
||||
- text: Должен быть один элемент <code>html</code> .
|
||||
testString: 'assert($("html").length == 1, "There should be one <code>html</code> element.");'
|
||||
- text: Теги <code>html</code> должны охватывать один элемент <code>h1</code> .
|
||||
testString: 'assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi), "The <code>html</code> tags should wrap around one <code>h1</code> element.");'
|
||||
- text: Your code should include a <code><!DOCTYPE html></code> tag.
|
||||
testString: assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
- text: There should be one <code>html</code> element.
|
||||
testString: assert($('html').length == 1);
|
||||
- text: The <code>html</code> tags should wrap around one <code>h1</code> element.
|
||||
testString: assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -39,14 +44,16 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<h1> Hello world </h1>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,33 +2,38 @@
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Define the Head and Body of an HTML Document
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cra9bfP
|
||||
forumTopicId: 301096
|
||||
localeTitle: Определение заголовка и тела документа HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете добавить еще один уровень организации в свой HTML-документ в тегах <code>html</code> с элементами <code>head</code> и <code>body</code> . Любая разметка с информацией о Вашей странице будет идти в <code>head</code> метку. Тогда любая метка с содержимым страницы (то, что отображается для пользователя) войдет в тег <code>body</code> . Элементы метаданных, такие как <code>link</code> , <code>meta</code> , <code>title</code> и <code>style</code> , обычно входят в элемент <code>head</code> . Вот пример макета страницы: <blockquote> <! DOCTYPE html> <br> <HTML> <br> <Голова> <br> <! - элементы метаданных -> <br> </ HEAD> <br> <Тело> <br> <! - содержание страницы -> <br> </ Body> <br> </ Html> </blockquote></section>
|
||||
<section id='description'>
|
||||
Вы можете добавить еще один уровень организации в свой HTML-документ в тегах <code>html</code> с элементами <code>head</code> и <code>body</code> . Любая разметка с информацией о Вашей странице будет идти в <code>head</code> метку. Тогда любая метка с содержимым страницы (то, что отображается для пользователя) войдет в тег <code>body</code> . Элементы метаданных, такие как <code>link</code> , <code>meta</code> , <code>title</code> и <code>style</code> , обычно входят в элемент <code>head</code> . Вот пример макета страницы: <blockquote> <! DOCTYPE html> <br> <HTML> <br> <Голова> <br> <! - элементы метаданных -> <br> </ HEAD> <br> <Тело> <br> <! - содержание страницы -> <br> </ Body> <br> </ Html> </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Отредактируйте разметку, чтобы появилась <code>head</code> и <code>body</code> . Элемент <code>head</code> должен включать только <code>title</code> , а элемент <code>body</code> должен включать только <code>h1</code> и <code>p</code> . </section>
|
||||
<section id='instructions'>
|
||||
Отредактируйте разметку, чтобы появилась <code>head</code> и <code>body</code> . Элемент <code>head</code> должен включать только <code>title</code> , а элемент <code>body</code> должен включать только <code>h1</code> и <code>p</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: На странице должен быть только один элемент <code>head</code> .
|
||||
testString: 'assert($("head").length == 1, "There should be only one <code>head</code> element on the page.");'
|
||||
- text: На странице должен быть только один элемент <code>body</code> .
|
||||
testString: 'assert($("body").length == 1, "There should be only one <code>body</code> element on the page.");'
|
||||
- text: Элемент <code>head</code> должен быть дочерним элементом <code>html</code> .
|
||||
testString: 'assert($("html").children("head").length == 1, "The <code>head</code> element should be a child of the <code>html</code> element.");'
|
||||
- text: Элемент <code>body</code> должен быть дочерним элементом <code>html</code> .
|
||||
testString: 'assert($("html").children("body").length == 1, "The <code>body</code> element should be a child of the <code>html</code> element.");'
|
||||
- text: Элемент <code>head</code> должен обернуть элемент <code>title</code> .
|
||||
testString: 'assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi), "The <code>head</code> element should wrap around the <code>title</code> element.");'
|
||||
- text: Элемент <code>body</code> должен обернуть оба элемента <code>h1</code> и <code>p</code> .
|
||||
testString: 'assert($("body").children("h1").length == 1 && $("body").children("p").length == 1, "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.");'
|
||||
- text: There should be only one <code>head</code> element on the page.
|
||||
testString: assert($('head').length == 1);
|
||||
- text: There should be only one <code>body</code> element on the page.
|
||||
testString: assert($('body').length == 1);
|
||||
- text: The <code>head</code> element should be a child of the <code>html</code> element.
|
||||
testString: assert($('html').children('head').length == 1);
|
||||
- text: The <code>body</code> element should be a child of the <code>html</code> element.
|
||||
testString: assert($('html').children('body').length == 1);
|
||||
- text: The <code>head</code> element should wrap around the <code>title</code> element.
|
||||
testString: assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi));
|
||||
- text: The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.
|
||||
testString: assert(code.match(/<body>\s*?(((<h1>\s*?.*?\s*?<\/h1>\s*?)(<p>(.*\s*)*?<\/p>\s*?))|((<p>\s*?.*?\s*?<\/p>\s*?)(<h1>(.*\s*)*?<\/h1>\s*?)))<\/body>/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -53,14 +58,22 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The best page ever</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,32 @@
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Delete HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/ckK73C9
|
||||
forumTopicId: 17559
|
||||
localeTitle: Удалить элементы HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Наш телефон не имеет большого пространства. Удалим ненужные элементы, чтобы мы могли начать строить CatPhotoApp. </section>
|
||||
<section id='description'>
|
||||
Наш телефон не имеет большого пространства. Удалим ненужные элементы, чтобы мы могли начать строить CatPhotoApp.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Удалите элемент <code>h1</code> чтобы мы могли упростить наше представление. </section>
|
||||
<section id='instructions'>
|
||||
Удалите элемент <code>h1</code> чтобы мы могли упростить наше представление.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Удалите элемент <code>h1</code> .
|
||||
testString: 'assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), "Delete your <code>h1</code> element.");'
|
||||
- text: Оставьте свой элемент <code>h2</code> на странице.
|
||||
testString: 'assert(code.match(/<h2>[\w\W]*<\/h2>/gi), "Leave your <code>h2</code> element on the page.");'
|
||||
- text: Оставьте свой элемент <code>p</code> на странице.
|
||||
testString: 'assert(code.match(/<p>[\w\W]*<\/p>/gi), "Leave your <code>p</code> element on the page.");'
|
||||
- text: Delete your <code>h1</code> element.
|
||||
testString: assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
- text: Leave your <code>h2</code> element on the page.
|
||||
testString: assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
- text: Leave your <code>p</code> element on the page.
|
||||
testString: assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -44,14 +49,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = "<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,34 @@
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Fill in the Blank with Placeholder Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cgR7Dc7
|
||||
forumTopicId: 18178
|
||||
localeTitle: Заполните пустое поле текстом-заполнителем
|
||||
---
|
||||
|
||||
## Описание
|
||||
<section id="description"> Веб-разработчики традиционно используют <code>lorem ipsum text</code> в качестве текста-заполнителя. Текст «lorem ipsum» случайным образом взят из знаменитого отрывка Цицерона Древнего Рима. Текст "lorem ipsum" использовался в качестве текста-заполнителя наборщиками текста с 16 века, и эта традиция продолжается на веб-страницах. Однако, 5 веков - это достаточно долго. Раз уж мы создаем CatPhotoApp, давайте использовать что-то под названием <code>kitty ipsum text</code> . </section>
|
||||
## Description
|
||||
<section id='description'>
|
||||
Веб-разработчики традиционно используют <code>lorem ipsum text</code> в качестве текста-заполнителя. Текст «lorem ipsum» случайным образом взят из знаменитого отрывка Цицерона Древнего Рима. Текст "lorem ipsum" использовался в качестве текста-заполнителя наборщиками текста с 16 века, и эта традиция продолжается на веб-страницах. Однако, 5 веков - это достаточно долго. Раз уж мы создаем CatPhotoApp, давайте использовать что-то под названием <code>kitty ipsum text</code> .
|
||||
</section>
|
||||
|
||||
## Инструкции
|
||||
<section id="instructions"> Замените текст внутри вашего элемента <code>p</code> на первые несколько слов этого текста <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code> kitty: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code> </section>
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Замените текст внутри вашего элемента <code>p</code> на первые несколько слов этого текста <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code> kitty: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>
|
||||
</section>
|
||||
|
||||
## Тесты
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>p</code> должен содержать первые несколько слов предоставленного <code>kitty ipsum text</code> .
|
||||
testString: 'assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.");'
|
||||
- text: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.
|
||||
testString: assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Исходной код
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
@@ -40,14 +45,17 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Решение
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,35 +2,40 @@
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Headline with the h2 Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cE8Gqf3
|
||||
forumTopicId: 18196
|
||||
localeTitle: Заголовок с элементом h2
|
||||
---
|
||||
|
||||
## Описание
|
||||
<section id="description"> В течение следующих нескольких уроков мы по частям построим HTML5 веб-приложение с картинками котят. Элемент <code>h2</code>, который вы добавите на этом шаге, добавит заголовок второго уровня на веб-страницу. Этот элемент сообщает браузеру информацию о структуре вашего веб-сайта. Элементы <code>h1</code> часто используются для основных заголовков, а элементы <code>h2</code> обычно используются для подзаголовков. Существуют также элементы <code>h3</code> , <code>h4</code> , <code>h5</code> и <code>h6</code> для обозначения разных уровней подзаголовков. </section>
|
||||
## Description
|
||||
<section id='description'>
|
||||
В течение следующих нескольких уроков мы по частям построим HTML5 веб-приложение с картинками котят. Элемент <code>h2</code>, который вы добавите на этом шаге, добавит заголовок второго уровня на веб-страницу. Этот элемент сообщает браузеру информацию о структуре вашего веб-сайта. Элементы <code>h1</code> часто используются для основных заголовков, а элементы <code>h2</code> обычно используются для подзаголовков. Существуют также элементы <code>h3</code> , <code>h4</code> , <code>h5</code> и <code>h6</code> для обозначения разных уровней подзаголовков.
|
||||
</section>
|
||||
|
||||
## Инструкции
|
||||
<section id="instructions"> Добавьте тег <code>h2</code> с текстом «CatPhotoApp», чтобы создать второй <code>element</code>(элемент) HTML под <code>element</code>(элементом) <code>h1</code> с текстом «Hello World» . </section>
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Добавьте тег <code>h2</code> с текстом «CatPhotoApp», чтобы создать второй <code>element</code>(элемент) HTML под <code>element</code>(элементом) <code>h1</code> с текстом «Hello World» .
|
||||
</section>
|
||||
|
||||
## Тесты
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Создайте элемент <code>h2</code> .
|
||||
testString: 'assert(($("h2").length > 0), "Create an <code>h2</code> element.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>h2</code> имеет конечный тег.'
|
||||
testString: 'assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length, "Make sure your <code>h2</code> element has a closing tag.");'
|
||||
- text: Ваш элемент <code>h2</code> должен иметь текст «CatPhotoApp».
|
||||
testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your <code>h2</code> element should have the text "CatPhotoApp".");'
|
||||
- text: Ваш элемент <code>h1</code> должен иметь текст «Hello World».
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
- text: Create an <code>h2</code> element.
|
||||
testString: assert(($("h2").length > 0));
|
||||
- text: Make sure your <code>h2</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length);
|
||||
- text: Your <code>h2</code> element should have the text "CatPhotoApp".
|
||||
testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));
|
||||
- text: Your <code>h1</code> element should have the text "Hello World".
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Исходной код
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
@@ -42,14 +47,6 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Решение
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
## Solution
|
||||
|
||||
@@ -2,33 +2,38 @@
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Inform with the Paragraph Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/ceZ7DtN
|
||||
forumTopicId: 18202
|
||||
localeTitle: Передайте информацию с помощью элемента "параграф"
|
||||
---
|
||||
|
||||
## Описание
|
||||
<section id="description"> Для создания текста параграфа веб-сайта лучше использовать элемент <code>p</code>. <code>p</code> - это сокращение от слова «paragraph» (параграф). Вы можете создать параграф с этим элементом следующим образом: <code><p>I'm a p tag!</p></code> </section>
|
||||
## Description
|
||||
<section id='description'>
|
||||
Для создания текста параграфа веб-сайта лучше использовать элемент <code>p</code>. <code>p</code> - это сокращение от слова «paragraph» (параграф). Вы можете создать параграф с этим элементом следующим образом: <code><p>I'm a p tag!</p></code>
|
||||
</section>
|
||||
|
||||
## Инструкции
|
||||
<section id="instructions"> Создайте <code>p</code> элемент под вашим элементом <code>h2</code> с текстом «Hello Paragraph». </section>
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Создайте <code>p</code> элемент под вашим элементом <code>h2</code> с текстом «Hello Paragraph».
|
||||
</section>
|
||||
|
||||
## Тесты
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Создайте элемент <code>p</code> .
|
||||
testString: 'assert(($("p").length > 0), "Create a <code>p</code> element.");'
|
||||
- text: Ваш элемент <code>p</code> должен иметь текст «Hello Paragraph».
|
||||
testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your <code>p</code> element should have the text "Hello Paragraph".");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>p</code> имеет конечный тег.'
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure your <code>p</code> element has a closing tag.");'
|
||||
- text: Your code should have a valid <code>p</code> element.
|
||||
testString: assert(($("p").length > 0));
|
||||
- text: Your <code>p</code> element should have the text "Hello Paragraph".
|
||||
testString: assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()));
|
||||
- text: Make sure your <code>p</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Исходной код
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
@@ -41,14 +46,15 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Решение
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,35 +2,40 @@
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Introduction to HTML5 Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cBkZGpt7
|
||||
forumTopicId: 301097
|
||||
localeTitle: Введение в элементы HTML5
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML5 вводит более описательные HTML-теги. К ним относятся <code>header</code> , <code>footer</code> , <code>nav</code> , <code>video</code> , <code>article</code> , <code>section</code> и другие. Эти теги упрощают чтение вашего HTML, а также помогают в поисковой оптимизации (SEO) и доступности. <code>main</code> тег HTML5 помогает поисковым системам и другим разработчикам находить основное содержимое вашей страницы. <strong>Заметка</strong> <br> Многие из новых тегов HTML5 и их преимущества описаны в разделе «Прикладная доступность». </section>
|
||||
<section id='description'>
|
||||
HTML5 вводит более описательные HTML-теги. К ним относятся <code>header</code> , <code>footer</code> , <code>nav</code> , <code>video</code> , <code>article</code> , <code>section</code> и другие. Эти теги упрощают чтение вашего HTML, а также помогают в поисковой оптимизации (SEO) и доступности. <code>main</code> тег HTML5 помогает поисковым системам и другим разработчикам находить основное содержимое вашей страницы. <strong>Заметка</strong> <br> Многие из новых тегов HTML5 и их преимущества описаны в разделе «Прикладная доступность».
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте второй элемент <code>p</code> после существующего элемента <code>p</code> со следующим текстом <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> kitty: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> Оберните абзацы с помощью <code>main</code> и закрывающего <code>main</code> тега. </section>
|
||||
<section id='instructions'>
|
||||
Создайте второй элемент <code>p</code> после существующего элемента <code>p</code> со следующим текстом <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> kitty: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> Оберните абзацы с помощью <code>main</code> и закрывающего <code>main</code> тега.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Вам нужны 2 <code>p</code> элемента с текстом Китти Ipsum.
|
||||
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
|
||||
- text: 'Убедитесь, что каждый из ваших <code>p</code> элементов имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: ''
|
||||
testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
|
||||
- text: Ваш код должен иметь один <code>main</code> элемент.
|
||||
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
|
||||
- text: <code>main</code> элемент должен содержать два элемента абзаца в качестве детей.
|
||||
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
|
||||
- text: <code>main</code> тег открытия должен появиться перед тегом первого абзаца.
|
||||
testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
|
||||
- text: Закрывающий <code>main</code> тег должен появиться после второго тега абзаца закрытия.
|
||||
testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'
|
||||
- text: You need 2 <code>p</code> elements with Kitty Ipsum text.
|
||||
testString: assert($("p").length > 1);
|
||||
- text: Make sure each of your <code>p</code> elements has a closing tag.
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
- text: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.
|
||||
testString: assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()));
|
||||
- text: Your code should have one <code>main</code> element.
|
||||
testString: assert($('main').length === 1);
|
||||
- text: The <code>main</code> element should have two paragraph elements as children.
|
||||
testString: assert($("main").children("p").length === 2);
|
||||
- text: The opening <code>main</code> tag should come before the first paragraph tag.
|
||||
testString: assert(code.match(/<main>\s*?<p>/g));
|
||||
- text: The closing <code>main</code> tag should come after the second closing paragraph tag.
|
||||
testString: assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -50,14 +55,17 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,31 +2,32 @@
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Link to External Pages with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/c8EkncB
|
||||
forumTopicId: 18226
|
||||
localeTitle: Ссылка на внешние страницы с элементами привязки
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id="description"> Вы можете использовать элементы <code>anchor</code> для ссылки на контент вне вашей веб-страницы. Элементам <code>anchor</code> нужен адрес веб-сайта назначения, называемый атрибутом <code>href</code>. Им также нужен якорный текст. Вот пример: <code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code> Затем ваш браузер отобразит текст <strong>«это ссылки на freecodecamp.org»</strong> в качестве ссылки, которую вы можете щелкнуть. И эта ссылка приведет вас к веб-адресу <strong>https://www.freecodecamp.org</strong> . </section>
|
||||
<section id='description'>
|
||||
Вы можете использовать элементы <code>anchor</code> для ссылки на контент вне вашей веб-страницы. Элементам <code>anchor</code> нужен адрес веб-сайта назначения, называемый атрибутом <code>href</code>. Им также нужен якорный текст. Вот пример: <code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code> Затем ваш браузер отобразит текст <strong>«это ссылки на freecodecamp.org»</strong> в качестве ссылки, которую вы можете щелкнуть. И эта ссылка приведет вас к веб-адресу <strong>https://www.freecodecamp.org</strong> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
Создайте элемент, который ссылается на <code>http://freecatphotoapp.com</code> и имеет «фотографии котят» в качестве его якорного текста.
|
||||
|
||||
<section id='instructions'>
|
||||
Создайте элемент, который ссылается на <code><http://freecatphotoapp.com></code> и имеет «фотографии котят» в качестве его якорного текста.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
|
||||
- text: Ваш элемент <code>a</code> должен иметь <code>якорный текст</code> «cat photos».
|
||||
|
||||
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
|
||||
- text: 'Вам нужно создать <code>a</code> элемент, являющийся ссылкой на <code>http://freecatphotoapp .com</code>'
|
||||
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>");'
|
||||
- text: 'Убедитесь, что элемент <code>a</code> имеет закрывающий тег'
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
- text: Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".
|
||||
testString: assert((/cat photos/gi).test($("a").text()));
|
||||
- text: You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>
|
||||
testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));
|
||||
- text: Make sure your <code>a</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
|
||||
```
|
||||
|
||||
@@ -53,14 +54,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<a href="http://freecatphotoapp.com">cat photos</a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,33 +2,38 @@
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Link to Internal Sections of a Page with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cyrDRUL
|
||||
forumTopicId: 301098
|
||||
localeTitle: Ссылка на внутренние разделы страницы с элементами привязки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Элементы привязки также могут использоваться для создания внутренних ссылок для перехода к различным разделам веб-страницы. Чтобы создать внутреннюю ссылку, вы назначаете атрибут <code>href</code> ссылки на хэш-символ <code>#</code> плюс значение атрибута <code>id</code> для элемента, к которому вы хотите внутренне связать, обычно дальше вниз по странице. Затем вам нужно добавить тот же атрибут <code>id</code> к элементу, к которому вы привязываетесь. <code>id</code> - это атрибут, который однозначно описывает элемент. Ниже приведен пример внутренней привязной ссылки и ее целевого элемента: <blockquote> <a href="#contacts-header"> Контакты </a> <br> ... <br> <h2 id = "contacts-header"> Контакты </ h2> </blockquote> Когда пользователи нажимают ссылку «Контакты», они будут отправлены в раздел веб-страницы с элементом заголовка « <b>Контакты»</b> . </section>
|
||||
<section id='description'>
|
||||
Элементы привязки также могут использоваться для создания внутренних ссылок для перехода к различным разделам веб-страницы. Чтобы создать внутреннюю ссылку, вы назначаете атрибут <code>href</code> ссылки на хэш-символ <code>#</code> плюс значение атрибута <code>id</code> для элемента, к которому вы хотите внутренне связать, обычно дальше вниз по странице. Затем вам нужно добавить тот же атрибут <code>id</code> к элементу, к которому вы привязываетесь. <code>id</code> - это атрибут, который однозначно описывает элемент. Ниже приведен пример внутренней привязной ссылки и ее целевого элемента: <blockquote> <a href="#contacts-header"> Контакты </a> <br> ... <br> <h2 id = "contacts-header"> Контакты </ h2> </blockquote> Когда пользователи нажимают ссылку «Контакты», они будут отправлены в раздел веб-страницы с элементом заголовка « <b>Контакты»</b> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените внешнюю ссылку на внутреннюю ссылку, изменив атрибут <code>href</code> на «#footer» и текст «Фотографии кошки» на «Перейти к нижнему». Удалите атрибут <code>target="_blank"</code> из тега привязки, поскольку это заставляет связанный документ открываться на вкладке нового окна. Затем добавьте атрибут <code>id</code> со значением «footer» в элемент <code><footer></code> в нижней части страницы. </section>
|
||||
<section id='instructions'>
|
||||
Измените внешнюю ссылку на внутреннюю ссылку, изменив атрибут <code>href</code> на «#footer» и текст «Фотографии кошки» на «Перейти к нижнему». Удалите атрибут <code>target="_blank"</code> из тега привязки, поскольку это заставляет связанный документ открываться на вкладке нового окна. Затем добавьте атрибут <code>id</code> со значением «footer» в элемент <code><footer></code> в нижней части страницы.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: На вашей странице должен быть только один тег привязки.
|
||||
testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");'
|
||||
- text: На вашей странице должен быть только один <code>footer</code> тег.
|
||||
testString: 'assert($("footer").length == 1, "There should be only one <code>footer</code> tag on your page.");'
|
||||
- text: 'Тег <code>a</code> должен иметь атрибут <code>href</code> установленный на «#footer».'
|
||||
testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");'
|
||||
- text: Тег <code>a</code> должен не иметь <code>target</code> атрибута
|
||||
testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");'
|
||||
- text: Текст должен быть «Перейти к низу». <code>a</code>
|
||||
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");'
|
||||
- text: Тег <code>footer</code> должен иметь атрибут <code>id</code> установленный в «нижний колонтитул».
|
||||
testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");'
|
||||
- text: There should be only one anchor tag on your page.
|
||||
testString: assert($('a').length == 1);
|
||||
- text: There should be only one <code>footer</code> tag on your page.
|
||||
testString: assert($('footer').length == 1);
|
||||
- text: The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".
|
||||
testString: assert($('a').eq(0).attr('href') == "#footer");
|
||||
- text: The <code>a</code> tag should not have a <code>target</code> attribute
|
||||
testString: assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true);
|
||||
- text: The <code>a</code> text should be "Jump to Bottom".
|
||||
testString: assert($('a').eq(0).text().match(/Jump to Bottom/gi));
|
||||
- text: The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".
|
||||
testString: assert($('footer').eq(0).attr('id') == "footer");
|
||||
|
||||
```
|
||||
|
||||
@@ -60,14 +65,27 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="#footer">Jump to Bottom</a>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="footer">Copyright Cat Photo App</footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Make Dead Links Using the Hash Symbol
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cMdkytL
|
||||
forumTopicId: 18230
|
||||
localeTitle: Создание мертвых ссылок с использованием символа хэша
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Иногда вы хотите добавить элементы на свой веб - сайт , прежде чем вы знаете , где они будут ссылаться. <code>a</code> Это также удобно, когда вы меняете поведение ссылки с помощью <code>JavaScript</code> , о чем мы узнаем позже. </section>
|
||||
<section id='description'>
|
||||
Иногда вы хотите добавить элементы на свой веб - сайт , прежде чем вы знаете , где они будут ссылаться. <code>a</code> Это также удобно, когда вы меняете поведение ссылки с помощью <code>JavaScript</code> , о чем мы узнаем позже.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Текущее значение атрибута <code>href</code> - это ссылка, которая указывает на «http://freecatphotoapp.com». Замените значение атрибута <code>href</code> символом <code>#</code> , также известным как хэш-символ, чтобы создать мертвую ссылку. Например: <code>href="#"</code> </section>
|
||||
<section id='instructions'>
|
||||
Текущее значение атрибута <code>href</code> - это ссылка, которая указывает на «http://freecatphotoapp.com». Замените значение атрибута <code>href</code> символом <code>#</code> , также известным как хэш-символ, чтобы создать мертвую ссылку. Например: <code>href="#"</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш элемент должен быть мертвой ссылке с значением <code>a</code> <code>href</code> атрибута установлено значение «#».'
|
||||
testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");'
|
||||
- text: Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".
|
||||
testString: assert($("a").attr("href") === "#");
|
||||
|
||||
```
|
||||
|
||||
@@ -44,14 +49,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,37 +2,42 @@
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Nest an Anchor Element within a Paragraph
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cb6k8Cb
|
||||
forumTopicId: 18244
|
||||
localeTitle: Гнездо анкерного элемента в абзаце
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете вставлять ссылки в другие текстовые элементы. <blockquote> <Р> <br> Вот вам ссылка <a target="_blank" href="http://freecodecamp.org"> на freecodecamp.org </a> для вас. <br> </ Р> </blockquote> Давайте разберем пример: Обычный текст завернут в элемент <code>p</code> : <br> <code><p> Here's a ... for you to follow. </p></code> Следующий элемент <code>anchor</code> <code><a></code> (для которого требуется закрывающий тег <code></a></code> ): <br> <code><a> ... </a></code> <code>target</code> - это атрибут тега привязки, который указывает, где можно открыть ссылку, а значение <code>"_blank"</code> указывает на открытие ссылки на новой вкладке. <code>href</code> является атрибутом тега привязки, который содержит URL-адрес связь: <br> <code><a href="http://freecodecamp.org"> ... </a></code> В тексте, <strong>«ссылка на freecodecamp.org»</strong> , в элементе <code>anchor text</code> , который называется <code>anchor text</code> , будет отображаться ссылка: <br> <code><a href=" ... ">link to freecodecamp.org</a></code> Окончательный результат примера будет выглядеть так: <br><p> Вот <a target="_blank" href="http://freecodecamp.org">ссылка на freecodecamp.org</a> для вас. </p></section>
|
||||
<section id='description'>
|
||||
Вы можете вставлять ссылки в другие текстовые элементы. <blockquote> <Р> <br> Вот вам ссылка <a target="_blank" href="http://freecodecamp.org"> на freecodecamp.org </a> для вас. <br> </ Р> </blockquote> Давайте разберем пример: Обычный текст завернут в элемент <code>p</code> : <br> <code><p> Here's a ... for you to follow. </p></code> Следующий элемент <code>anchor</code> <code><a></code> (для которого требуется закрывающий тег <code></a></code> ): <br> <code><a> ... </a></code> <code>target</code> - это атрибут тега привязки, который указывает, где можно открыть ссылку, а значение <code>"_blank"</code> указывает на открытие ссылки на новой вкладке. <code>href</code> является атрибутом тега привязки, который содержит URL-адрес связь: <br> <code><a href="http://freecodecamp.org"> ... </a></code> В тексте, <strong>«ссылка на freecodecamp.org»</strong> , в элементе <code>anchor text</code> , который называется <code>anchor text</code> , будет отображаться ссылка: <br> <code><a href=" ... ">link to freecodecamp.org</a></code> Окончательный результат примера будет выглядеть так: <br><p> Вот <a target="_blank" href="http://freecodecamp.org">ссылка на freecodecamp.org</a> для вас. </p>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Теперь гнездо уже существующий <code>a</code> элемент в новом <code>p</code> элемент (только после того, как существующего <code>main</code> элемента). В новом абзаце должен быть текст с надписью «Просмотр фотографий кошек», где «фотографии кошек» - это ссылка, а остальная часть текста - простой текст. </section>
|
||||
<section id='instructions'>
|
||||
Теперь гнездо уже существующий <code>a</code> элемент в новом <code>p</code> элемент (только после того, как существующего <code>main</code> элемента). В новом абзаце должен быть текст с надписью «Просмотр фотографий кошек», где «фотографии кошек» - это ссылка, а остальная часть текста - простой текст.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Вам нужно <code>a</code> элемент , который связывает с «http://freecatphotoapp.com».'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");'
|
||||
- text: Ваш элемент должен иметь якорный текст «кошачьи фотографии» <code>a</code>
|
||||
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");'
|
||||
- text: 'Создать новый <code>p</code> элемент вокруг вашего <code>a</code> элементе. Там должно быть , по крайней мере , 3 всего <code>p</code> теги в вашем HTML коде.'
|
||||
testString: 'assert($("p") && $("p").length > 2, "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.");'
|
||||
- text: Ваш элемент должен быть вложен в вашем новом <code>a</code> <code>p</code> элемент.
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")), "Your <code>a</code> element should be nested within your new <code>p</code> element.");'
|
||||
- text: Ваш элемент <code>p</code> должен иметь текст «Просмотреть больше» (с пробелом после него).
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)), "Your <code>p</code> element should have the text "View more " (with a space after it).");'
|
||||
- text: Ваш элемент <em>не</em> должен иметь текст «Больше». <code>a</code>
|
||||
testString: 'assert(!$("a").text().match(/View\smore/gi), "Your <code>a</code> element should <em>not</em> have the text "View more".");'
|
||||
- text: 'Убедитесь, что каждый из ваших <code>p</code> элементов имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: 'Убедитесь , что каждый из ваших <code>a</code> элементы закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
- text: You need an <code>a</code> element that links to "http://freecatphotoapp.com".
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0));
|
||||
- text: Your <code>a</code> element should have the anchor text of "cat photos"
|
||||
testString: assert($("a").text().match(/cat\sphotos/gi));
|
||||
- text: Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.
|
||||
testString: assert($("p") && $("p").length > 2);
|
||||
- text: Your <code>a</code> element should be nested within your new <code>p</code> element.
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")));
|
||||
- text: Your <code>p</code> element should have the text "View more " (with a space after it).
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)));
|
||||
- text: Your <code>a</code> element should <em>not</em> have the text "View more".
|
||||
testString: assert(!$("a").text().match(/View\smore/gi));
|
||||
- text: Make sure each of your <code>p</code> elements has a closing tag.
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length);
|
||||
- text: Make sure each of your <code>a</code> elements has a closing tag.
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
|
||||
```
|
||||
|
||||
@@ -59,14 +64,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>View more <a target="_blank" href="http://freecatphotoapp.com">cat photos</a></p>
|
||||
|
||||
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,34 @@
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Nest Many Elements within a Single div Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cNW4kC3
|
||||
forumTopicId: 18246
|
||||
localeTitle: Гнездо Много элементов в одном элементе div
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Элемент <code>div</code> , также известный как элемент разделения, является контейнером общего назначения для других элементов. Элемент <code>div</code> вероятно, является наиболее часто используемым HTML-элементом. Как и любой другой несамозакрывающийся элемент, вы можете открыть элемент <code>div</code> с помощью <code><div></code> и закрыть его в другой строке с помощью <code></div></code> . </section>
|
||||
<section id='description'>
|
||||
Элемент <code>div</code> , также известный как элемент разделения, является контейнером общего назначения для других элементов. Элемент <code>div</code> вероятно, является наиболее часто используемым HTML-элементом. Как и любой другой несамозакрывающийся элемент, вы можете открыть элемент <code>div</code> с помощью <code><div></code> и закрыть его в другой строке с помощью <code></div></code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Гнездо ваших «Вещей кошек любят» и «Вещи, которые ненавидят кошек», перечисляет все в одном элементе <code>div</code> . Подсказка: Попробуйте поместить ваше открытие <code>div</code> тега выше ваших «Things кошек любит» <code>p</code> элемент и ваше закрытие <code>div</code> тег после закрытия <code>ol</code> тега , так что оба ваших списков находятся в пределах одного <code>div</code> . </section>
|
||||
<section id='instructions'>
|
||||
Гнездо ваших «Вещей кошек любят» и «Вещи, которые ненавидят кошек», перечисляет все в одном элементе <code>div</code> . Подсказка: Попробуйте поместить ваше открытие <code>div</code> тега выше ваших «Things кошек любит» <code>p</code> элемент и ваше закрытие <code>div</code> тег после закрытия <code>ol</code> тега , так что оба ваших списков находятся в пределах одного <code>div</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Гнездо ваших элементов <code>p</code> внутри вашего элемента <code>div</code> .
|
||||
testString: 'assert($("div").children("p").length > 1, "Nest your <code>p</code> elements inside your <code>div</code> element.");'
|
||||
- text: Вставьте свой элемент <code>ul</code> внутри элемента <code>div</code> .
|
||||
testString: 'assert($("div").children("ul").length > 0, "Nest your <code>ul</code> element inside your <code>div</code> element.");'
|
||||
- text: Гнездо вашего элемента <code>ol</code> внутри вашего элемента <code>div</code> .
|
||||
testString: 'assert($("div").children("ol").length > 0, "Nest your <code>ol</code> element inside your <code>div</code> element.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>div</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length, "Make sure your <code>div</code> element has a closing tag.");'
|
||||
- text: Nest your <code>p</code> elements inside your <code>div</code> element.
|
||||
testString: assert($("div").children("p").length > 1);
|
||||
- text: Nest your <code>ul</code> element inside your <code>div</code> element.
|
||||
testString: assert($("div").children("ul").length > 0);
|
||||
- text: Nest your <code>ol</code> element inside your <code>div</code> element.
|
||||
testString: assert($("div").children("ol").length > 0);
|
||||
- text: Make sure your <code>div</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length);
|
||||
|
||||
```
|
||||
|
||||
@@ -56,11 +61,11 @@ tests:
|
||||
</ol>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
@@ -70,14 +75,41 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form action="/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,34 @@
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Say Hello to HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cE8Gpt2
|
||||
forumTopicId: 18276
|
||||
localeTitle: Скажи Hello элементам HTML
|
||||
---
|
||||
|
||||
## Описание
|
||||
<section id="description"> Добро пожаловать в курс по HTML от freeCodeCamp. Мы проведем вас через веб-разработку шаг за шагом. Сначала вы начнете с создания простой веб-страницы с использованием HTML. Вы можете редактировать <code>code</code>(код) в <code>code editor</code>(редакторе кода), который встроен в эту веб-страницу. Вы видите <code><h1>Hello</h1></code> в редакторе кода? Это <code>element</code>(элемент) HTML. Большинство элементов HTML имеют <code>opening tag</code>(начальный тег) и <code>closing tag</code>(конечный тег). Начальные теги выглядят следующим образом: <code><h1></code> Конечные же теги выглядят так: <code></h1></code> Единственная разница между начальными и конечными тегами - это слеш вправо после открывающей скобки конечного тега. У каждого упражнения есть тесты, которые вы можете запустить в любое время, нажав кнопку «Запустить тесты». Когда вы пройдете все тесты, вам будет предложено отправить ваше решение и перейти к следующему заданию. </section>
|
||||
## Description
|
||||
<section id='description'>
|
||||
Добро пожаловать в курс по HTML от freeCodeCamp. Мы проведем вас через веб-разработку шаг за шагом. Сначала вы начнете с создания простой веб-страницы с использованием HTML. Вы можете редактировать <code>code</code>(код) в <code>code editor</code>(редакторе кода), который встроен в эту веб-страницу. Вы видите <code><h1>Hello</h1></code> в редакторе кода? Это <code>element</code>(элемент) HTML. Большинство элементов HTML имеют <code>opening tag</code>(начальный тег) и <code>closing tag</code>(конечный тег). Начальные теги выглядят следующим образом: <code><h1></code> Конечные же теги выглядят так: <code></h1></code> Единственная разница между начальными и конечными тегами - это слеш вправо после открывающей скобки конечного тега. У каждого упражнения есть тесты, которые вы можете запустить в любое время, нажав кнопку «Запустить тесты». Когда вы пройдете все тесты, вам будет предложено отправить ваше решение и перейти к следующему заданию.
|
||||
</section>
|
||||
|
||||
## Инструкции
|
||||
<section id="instructions"> Чтобы пройти тест по этому заданию, измените текст своего элемента <code>h1</code> на «Hello World». </section>
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Чтобы пройти тест по этому заданию, измените текст своего элемента <code>h1</code> на «Hello World».
|
||||
</section>
|
||||
|
||||
## Тесты
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>h1</code> должен иметь текст «Hello World».
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
- text: Your <code>h1</code> element should have the text "Hello World".
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($('h1').text()));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Исходной код
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
@@ -36,14 +41,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Решение
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,32 @@
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Turn an Image into a Link
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cRdBnUr
|
||||
forumTopicId: 18327
|
||||
localeTitle: Превратите изображение в ссылку
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете превращать элементы в ссылки, вложив их внутрь элемента <code>a</code>. Вложение вашего изображения внутрь <code>a</code> элемента. Вот пример: <code><a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a></code> Не забудьте использовать <code>#</code> в качестве свойства <code>href</code> вашего элемента <code>a</code> для того, чтобы превратить его в мертвую ссылку. </section>
|
||||
<section id='description'>
|
||||
Вы можете превращать элементы в ссылки, вложив их внутрь элемента <code>a</code>. Вложение вашего изображения внутрь <code>a</code> элемента. Вот пример: <code><a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a></code> Не забудьте использовать <code>#</code> в качестве свойства <code>href</code> вашего элемента <code>a</code> для того, чтобы превратить его в мертвую ссылку.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Поместите существующий элемент изображения в элемент якорь. Когда вы это сделаете, наведите курсор мыши на изображение. Ваш указатель курсора должен стать указателем на ссылку. Фотография котят теперь является ссылкой. </section>
|
||||
<section id='instructions'>
|
||||
Поместите существующий элемент изображения в элемент якорь. Когда вы это сделаете, наведите курсор мыши на изображение. Ваш указатель курсора должен стать указателем на ссылку. Фотография котят теперь является ссылкой.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Вложите существующий элемент <code>img</code> в элемент <code>a</code> .
|
||||
testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");'
|
||||
- text: 'Ваш элемент должен быть мертвой ссылкой <code>a</code> с значением <code>href</code> атрибута равным <code>#</code> .'
|
||||
testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.");'
|
||||
- text: 'Убедитесь, что каждый из ваших элементов <code>a</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
- text: Nest the existing <code>img</code> element within an <code>a</code> element.
|
||||
testString: assert($("a").children("img").length > 0);
|
||||
- text: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.
|
||||
testString: assert(new RegExp("#").test($("a").children("img").parent().attr("href")));
|
||||
- text: Make sure each of your <code>a</code> elements has a closing tag.
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length);
|
||||
|
||||
```
|
||||
|
||||
@@ -48,14 +53,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,35 +2,40 @@
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Uncomment HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cBmG9T7
|
||||
forumTopicId: 18329
|
||||
localeTitle: Раскомментирование в HTML
|
||||
---
|
||||
|
||||
## Описание
|
||||
<section id="description"> Комментирование - это способ, с помощью которого вы можете оставлять комментарии для других разработчиков в своем коде, не влияя на итоговый вывод, который отображается конечному пользователю. Комментирование также является удобным способом сделать код неактивным, не удаляя его целиком. Комментарии в HTML начинаются с <code><!--</code> , и заканчиваются с <code>--></code> </section>
|
||||
## Description
|
||||
<section id='description'>
|
||||
Комментирование - это способ, с помощью которого вы можете оставлять комментарии для других разработчиков в своем коде, не влияя на итоговый вывод, который отображается конечному пользователю. Комментирование также является удобным способом сделать код неактивным, не удаляя его целиком. Комментарии в HTML начинаются с <code><!--</code> , и заканчиваются с <code>--></code>
|
||||
</section>
|
||||
|
||||
## Инструкции
|
||||
<section id="instructions"> Раскомментируйте свои элементы <code>h1</code> , <code>h2</code> и <code>p</code> . </section>
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Раскомментируйте свои элементы <code>h1</code> , <code>h2</code> и <code>p</code> .
|
||||
</section>
|
||||
|
||||
## Тесты
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Раскомментируйте элемент <code>h1</code>, чтобы он стал видимым на странице.'
|
||||
testString: 'assert($("h1").length > 0, "Make your <code>h1</code> element visible on your page by uncommenting it.");'
|
||||
- text: 'Раскомментируйте элемент <code>h2</code>, чтобы он стал видимым на странице.'
|
||||
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");'
|
||||
- text: 'Раскомментируйте элемент <code>p</code>, чтобы он стал видимым на странице.'
|
||||
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");'
|
||||
- text: 'Проверьте, удалили ли вы все комментирующие теги, т. е. <code>--></code> .'
|
||||
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags, i.e. <code>--></code>.");'
|
||||
- text: Make your <code>h1</code> element visible on your page by uncommenting it.
|
||||
testString: assert($("h1").length > 0);
|
||||
- text: Make your <code>h2</code> element visible on your page by uncommenting it.
|
||||
testString: assert($("h2").length > 0);
|
||||
- text: Make your <code>p</code> element visible on your page by uncommenting it.
|
||||
testString: assert($("p").length > 0);
|
||||
- text: Be sure to delete all trailing comment tags, i.e. <code>--></code>.
|
||||
testString: assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,'')));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Исходной код
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
@@ -48,14 +53,17 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Решение
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Use HTML5 to Require a Field
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVMPUv/cMd4EcQ
|
||||
forumTopicId: 18360
|
||||
localeTitle: Использовать HTML5 для запроса поля
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вам могут потребоваться определенные поля формы, чтобы ваш пользователь не смог отправить вашу форму до тех пор, пока он или она корректно не заполнят их. Например, если вы хотите внести требуемое текстовое поле ввода, вы можете просто добавить атрибут <code>required</code> в ваш элемент <code>input</code> , например: <code><input type="text" required></code> </section>
|
||||
<section id='description'>
|
||||
Вам могут потребоваться определенные поля формы, чтобы ваш пользователь не смог отправить вашу форму до тех пор, пока он или она корректно не заполнят их. Например, если вы хотите внести требуемое текстовое поле ввода, вы можете просто добавить атрибут <code>required</code> в ваш элемент <code>input</code> , например: <code><input type="text" required></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте к вашему текстовому полю <code>input</code> атрибут <code>required</code>, чтобы ваш пользователь не мог отправить форму без завершения заполнения этого поля. Затем попробуйте отправить форму без ввода какого-либо текста. Посмотрите, как ваша форма HTML5 уведомляет вас о том, что это поле необходимо. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте к вашему текстовому полю <code>input</code> атрибут <code>required</code>, чтобы ваш пользователь не мог отправить форму без завершения заполнения этого поля. Затем попробуйте отправить форму без ввода какого-либо текста. Посмотрите, как ваша форма HTML5 уведомляет вас о том, что это поле необходимо.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>input</code> текста должен иметь <code>required</code> атрибут.
|
||||
testString: 'assert($("input").prop("required"), "Your text <code>input</code> element should have the <code>required</code> attribute.");'
|
||||
- text: Your text <code>input</code> element should have the <code>required</code> attribute.
|
||||
testString: assert($("input").prop("required"));
|
||||
|
||||
```
|
||||
|
||||
@@ -58,14 +63,35 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" 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="/submit-cat-photo">
|
||||
<input type="text" required placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user