diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md
index 1882fa7cb4..81f25b6e24 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md
@@ -1,32 +1,31 @@
---
id: 587d774c367417b2b2512a9c
-title: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения
+title: Add a Text Alternative to Images for Visually Impaired Accessibility
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cPp7VfD
+forumTopicId: 16628
localeTitle: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения
---
-## Description (Описание)
- Вероятно, вы уже встречали атрибут alt в теге img в других задачах. Alt описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.
-Например: <img src="importantLogo.jpeg" alt="Company logo">
-Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту alt и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание alt должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута alt для каждого изображения.
-
-## Instructions (Задание)
- Camper Cat, настоящий ниндзя в жизни и в программировании, создает веб-сайт, чтобы поделиться своими знаниями. Он хочет использовать изображение для профиля, которое продемонстрирует его навыки и будет оценено всеми посетителями сайта. Добавьте атрибут alt в тег img так, чтобы всем стало понятно, что Camper Cat занимается каратэ. (Изображение src не ссылается на фактический файл, поэтому вы должны увидеть текст alt на дисплее.)
## Description
- Вероятно, вы видели атрибут alt в теге img в других задачах. Текст Alt описывает содержимое изображения и предоставляет текстовую альтернативу. Это помогает в случае, если изображение не загружается или не может быть замечено пользователем. Он также используется поисковыми системами, чтобы понять, что содержит изображение, чтобы включить его в результаты поиска. Вот пример: <img src="importantLogo.jpeg" alt="Company logo"> Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не получат информацию, если они представлены только визуально. Для изображений экранные программы могут получить доступ к атрибуту alt и прочитать его содержимое для сообщения ключевой информации. Хороший alt представляет из себя короткий текст, который передает основной смысл изоражения. Вы всегда должны использовать атрибут alt для своих изображений. По спецификации HTML5 это считается обязательным.
+
+Вероятно, вы уже встречали атрибут alt в теге img в других задачах. Alt описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.
+Например: <img src="importantLogo.jpeg" alt="Company logo">
+Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту alt и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание alt должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута alt для каждого изображения.
+
## Instructions
- Camper Cat оказался как ниндзя кодером, так и настоящим ниндзя, и создает веб-сайт, чтобы поделиться своими знаниями. Изображение профиля, которое он хочет использовать, показывает его навыки и должно быть оценено всеми посетителями сайта. Добавьте атрибут alt в тег img , который объясняет, что Camper Cat занимается каратэ. (Изображение src не ссылается на фактический файл, поэтому вы должны увидеть текст alt на дисплее.)
-
-## Tests (Тесты)
+
+Camper Cat, настоящий ниндзя в жизни и в программировании, создает веб-сайт, чтобы поделиться своими знаниями. Он хочет использовать изображение для профиля, которое продемонстрирует его навыки и будет оценено всеми посетителями сайта. Добавьте атрибут alt в тег img так, чтобы всем стало понятно, что Camper Cat занимается каратэ. (Изображение src не ссылается на фактический файл, поэтому вы должны увидеть текст alt на дисплее.)
+
+## Tests
```yml
tests:
- - text: 'Ваш тег img должен иметь атрибут alt, и он не должен быть пустым.'
- testString: 'assert($("img").attr("alt"), "Your img tag should have an alt attribute, and it should not be empty.");'
+ - text: Your img tag should have an alt attribute and it should not be empty.
+ testString: assert($('img').attr('alt'));
```
@@ -44,14 +43,13 @@ tests:
-
-
-## Solution (Решение)
+## Solution
-```js
-// здесь должно быть ваше решение
+```html
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.russian.md
index d3f7c1c3c9..50ebfb6992 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.russian.md
@@ -2,34 +2,34 @@
id: 587d778b367417b2b2512aa8
title: Add an Accessible Date Picker
challengeType: 0
-videoUrl: ''
-
+videoUrl: https://scrimba.com/c/cR3bRbCV
+forumTopicId: 301008
localeTitle: Добавить возможность выбора даты
---
+## Description
+
+Формы часто включают поле input . Это поле может использоваться для создания различных элементов управления формой. Атрибут type в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода text и submit . В HTML5 появилась возможность указать поле date . В зависимости от поддержки браузера в поле input появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип text , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например:
<label for = "input1"> Введите дату: </ label> <input type = "date" id = "input1" name = "input1">
+
-## Description (Описание)
- Формы часто включают поле input . Это поле может использоваться для создания различных элементов управления формой. Атрибут type в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода text и submit . В HTML5 появилась возможность указать поле date . В зависимости от поддержки браузера в поле input появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип text , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например:
<label for = "input1"> Введите дату: </ label> <input type = "date" id = "input1" name = "input1">
+## Instructions
+
+Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте input тег с type атрибутом «дата», с id атрибутом «pickdate», и name атрибутом «дата».
+
-
-## Instructions (Задание)
- Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте input тег с type атрибутом «дата», с id атрибутом «pickdate», и name атрибутом «дата».
-
-
-## Tests (Тесты)
+## Tests
```yml
tests:
-
- - text: Вы должны добавить один тег input для поля выбора даты.
- testString: 'assert($("input").length == 2, "Your code should add one input tag for the date selector field.");'
- - text: Тег input должен иметь атрибут type со значением date.
- testString: 'assert($("input").attr("type") == "date", "Your input tag should have a type attribute with a value of date.");'
- - text: Ваш тег input должен иметь атрибут id со значением pickdate.
- testString: 'assert($("input").attr("id") == "pickdate", "Your input tag should have an id attribute with a value of pickdate.");'
- - text: Ваш тег input должен иметь атрибут name со значением date.
- testString: 'assert($("input").attr("name") == "date", "Your input tag should have a name attribute with a value of date.");'
+ - text: Your code should add one input tag for the date selector field.
+ testString: assert($('input').length == 2);
+ - text: Your input tag should have a type attribute with a value of date.
+ testString: assert($('input').attr('type') == 'date');
+ - text: Your input tag should have an id attribute with a value of pickdate.
+ testString: assert($('input').attr('id') == 'pickdate');
+ - text: Your input tag should have a name attribute with a value of date.
+ testString: assert($('input').attr('name') == 'date');
```
@@ -52,11 +52,11 @@ tests:
Tell us the best date for the competition
-
+
-
+
@@ -69,14 +69,29 @@ tests:
-
-
-## Solution (Решение)
+## Solution
-```js
-// здесь должно быть ваше решение
+```html
+
+
+
Tournaments
+
+
+
+
Mortal Kombat Tournament Survey
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md
index 1fecb15793..98773e8a08 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md
@@ -2,28 +2,28 @@
id: 587d778f367417b2b2512aad
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
challengeType: 0
-videoUrl: ''
-localeTitle: 'Будьте внимательны к пользователям, которые не могут различать некоторые цвета - аккуратно выбирайте цвет текста и фона для передачи значимой информации'
+videoUrl: https://scrimba.com/c/c437as3
+forumTopicId: 301011
+localeTitle: Будьте внимательны к пользователям, которые не могут различать некоторые цвета - аккуратно выбирайте цвет текста и фона для передачи значимой информации
---
-## Description (Описание)
- Существуют различные формы слепоты: от пониженной чувствительности к отдельным цветам до полного отсутствия цветного зрения. Наиболее распространенной формой является снижение способности различать зеленый цвет. Например, если вы выберете два близких зеленых оттенка для текста и для фона вашей страницы, некоторые пользователи не смогут ничего различить и прочитать. Чтобы узнать, какие цвета и оттенки являются потенциально проблемными, воспользуйтесь цветовым кругом - эти цвета будут располагаться по соседству. Их следует избегать при передаче важной информации. Некоторые онлайн-инструменты для выбора цвета дают возможность увидеть сочетание цветов глазами пользователей с различными типами слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста, воспользуйтесь ими.
-
## Description
- Существуют различные формы слепоты. Они могут варьироваться от пониженной чувствительности к определенной длины волны света до невозможности видеть цвет вообще. Наиболее распространенной формой является снижение чувствительности к обнаружению зеленого цвета. Например, если два похожих зеленых цвета являются цветом переднего плана и фона вашего контента, пользователь с цветовой слепотой может не распознать их. Близкие цвета можно рассматривать как соседей на цветовом колесе, и эти комбинации следует избегать при передаче важной информации. Заметка Некоторые онлайн-инструменты для выбора цвета включают визуальное моделирование того, как появляются цвета для разных типов слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста.
+
+Существуют различные формы слепоты: от пониженной чувствительности к отдельным цветам до полного отсутствия цветного зрения. Наиболее распространенной формой является снижение способности различать зеленый цвет. Например, если вы выберете два близких зеленых оттенка для текста и для фона вашей страницы, некоторые пользователи не смогут ничего различить и прочитать. Чтобы узнать, какие цвета и оттенки являются потенциально проблемными, воспользуйтесь цветовым кругом - эти цвета будут располагаться по соседству. Их следует избегать при передаче важной информации. Некоторые онлайн-инструменты для выбора цвета дают возможность увидеть сочетание цветов глазами пользователей с различными типами слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста, воспользуйтесь ими.
+
## Instructions
- Camper Cat тестирует различные стили для важной кнопки, но желтый ( #FFFF33 ) background-color и зеленый ( #33FF33 ) текст color соседствующие оттенки на цветовом колесе и практически неразличимы для некоторых пользователей с дальтонизмом. (Их аналогичная легкость также не позволяет проверить коэффициент контрастности). Измените color текста на синий ( #003366 ), чтобы решить обе проблемы.
-
+
+Camper Cat тестирует различные стили для важной кнопки, но желтый ( #FFFF33 ) background-color и зеленый ( #33FF33 ) текст color соседствующие оттенки на цветовом колесе и практически неразличимы для некоторых пользователей с дальтонизмом. (Их аналогичная легкость также не позволяет проверить коэффициент контрастности). Измените color текста на синий ( #003366 ), чтобы решить обе проблемы.
+
## Tests
-
```yml
tests:
- - text: Ваш код должен изменить цвет color текста для button на синий.
- testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text color for the button to the dark blue.");'
+ - text: Your code should change the text color for the button to the dark blue.
+ testString: assert($('button').css('color') == 'rgb(0, 51, 102)');
```
@@ -56,14 +56,28 @@ tests:
-
-
-## Solution (Решение)
+## Solution
-```js
-// здесь должно быть ваше решение
+```html
+
+
+
+
+
+
Danger!
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.russian.md
index 256752bcf5..d2ac333f77 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.russian.md
@@ -2,25 +2,30 @@
id: 587d778f367417b2b2512aac
title: Avoid Colorblindness Issues by Using Sufficient Contrast
challengeType: 0
-videoUrl: ''
-localeTitle: 'Избегайте недостаточной контрастности текста и фона, чтобы пользователю было легче их воспринимать'
+videoUrl: https://scrimba.com/c/cmzMEUw
+forumTopicId: 301012
+localeTitle: Избегайте недостаточной контрастности текста и фона, чтобы пользователю было легче их воспринимать
---
## Description
- Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи программ чтения с экрана его не увидят. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различением цветов, могли отличать их. Предыдущие задачи курса охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором случае. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно по оттенку, но иногда и по яркости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и осветления светлого с помощью анализатора цветного контраста. Более темными цветами на цветовом круге считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый.
+
+Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи программ чтения с экрана его не увидят. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различением цветов, могли отличать их. Предыдущие задачи курса охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором случае. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно по оттенку, но иногда и по яркости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и осветления светлого с помощью анализатора цветного контраста. Более темными цветами на цветовом круге считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый.
+
## Instructions
- Camper Cat экспериментирует с использованием цвета для текста своего блога и фона, но его текущая комбинация зеленоватого background-color с color текстом в темно-коричневом color имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя hsl() CSS hsl() (которое означает оттенок, насыщенность, яркость), изменив третий аргумент. Увеличьте значение яркости background-color с 35% до 55% и уменьшите значение яркости color с 20% до 15%. Это улучшает контрастность до 5.9: 1.
+
+Camper Cat экспериментирует с использованием цвета для текста своего блога и фона, но его текущая комбинация зеленоватого background-color с color текстом в темно-коричневом color имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя hsl() CSS hsl() (которое означает оттенок, насыщенность, яркость), изменив третий аргумент. Увеличьте значение яркости background-color с 35% до 55% и уменьшите значение яркости color с 20% до 15%. Это улучшает контрастность до 5.9: 1.
+
-## Tests (Тесты)
+## Tests
```yml
tests:
- - text: Ваш код должен только изменить значение яркости для свойства color текста на значение 15%.
- testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text color property to a value of 15%.");'
- - text: Ваш код должен только изменить значение яркости для свойства background-color на значение 55%.
- testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the background-color property to a value of 55%.");'
+ - text: Your code should only change the lightness value for the text color property to a value of 15%.
+ testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
+ - text: Your code should only change the lightness value for the background-color property to a value of 55%.
+ testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
```
@@ -55,14 +60,30 @@ tests:
-
-
-## Solution (Решение)
+## Solution
-```js
-// здесь должно быть ваше решение
+```html
+
+
+
+
+
+
Deep Thoughts with Master Camper Cat
+
+
+
A Word on the Recent Catnip Doping Scandal
+
The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.
+
As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.russian.md
index 70d90702a0..3ca09fbf45 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.russian.md
@@ -2,29 +2,30 @@
id: 587d778f367417b2b2512aae
title: Give Links Meaning by Using Descriptive Link Text
challengeType: 0
-videoUrl: ''
-localeTitle: 'Определите ссылку при помощи описания'
+videoUrl: https://scrimba.com/c/c437DcV
+forumTopicId: 301013
+localeTitle: Определите ссылку при помощи описания
---
-
-## Description
- У аудиоинтерфейсов (читалок), предназначенных для озвучивания текста на экране, есть разные опции в зависимости от типа контента. Они могут включать пропуск отдельных элементов, переход к основному содержимому или выдачу краткой выжимки содержания страницы только из заголовков. Или например, может быть выбрана озвучивание только ссылок, находящихся на странице. Когда мы просматриваем веб-страницу на экране, мы получаем информацию о том, куда ведет ссылка, из ее названия или того текста, который находится между тэгами anchor ( a ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами a. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.
+## Description
+
+У аудиоинтерфейсов (читалок), предназначенных для озвучивания текста на экране, есть разные опции в зависимости от типа контента. Они могут включать пропуск отдельных элементов, переход к основному содержимому или выдачу краткой выжимки содержания страницы только из заголовков. Или например, может быть выбрана озвучивание только ссылок, находящихся на странице. Когда мы просматриваем веб-страницу на экране, мы получаем информацию о том, куда ведет ссылка, из ее названия или того текста, который находится между тэгами anchor ( a ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами a. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.
+
## Instructions
- Текст ссылки, который использует Camper Cat, не очень понятен вне контекста страницы. Переместите теги ( a ) так, чтобы они выдавали описание "information about batteries"(«информация об аккумуляторах») вместо "Click here"(«Нажмите здесь»).
-
+
+Текст ссылки, который использует Camper Cat, не очень понятен вне контекста страницы. Переместите теги ( a ) так, чтобы они выдавали описание "information about batteries"(«информация об аккумуляторах») вместо "Click here"(«Нажмите здесь»).
+
## Tests
```yml
tests:
-
- - text: 'Ваш код должен переместить теги от словосочетания «Нажмите здесь» , к словосочетанию «информация об акумуляторах. a'
-
- testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor a tags from around the words "Click here" to wrap around the words "information about batteries".");'
- - text: 'Убедитесь , что вы не забыли закрывающий тег. a'
- testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(//g).length, "Make sure your a element has a closing tag.");'
+ - text: Your code should move the anchor a tags from around the words "Click here" to wrap around the words "information about batteries".
+ testString: assert($('a').text().match(/^(information about batteries)$/g));
+ - text: Make sure your a element has a closing tag.
+ testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(//g).length);
```
@@ -50,14 +51,21 @@ tests:
-
-
-## Solution (Решение)
+## Solution
-```js
-// здесь должно быть ваше решение
+```html
+
+
+
Deep Thoughts with Master Camper Cat
+
+
+
Defeating your Foe: the Red Dot is Ours!
+
Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for information about batteries
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.russian.md
index 4e5ab0db56..dd1892783a 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.russian.md
@@ -2,37 +2,40 @@
id: 587d7789367417b2b2512aa4
title: Improve Accessibility of Audio Content with the audio Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cVJVkcZ
+forumTopicId: 301014
localeTitle: Улучшаем доступность аудиоконтента
---
-
## Description
- В HTML5 audio элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. audio тег поддерживает атрибут controls . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример:
<audio id = "meowClip" элементы управления> <источник src = "audio / meow.mp3" type = "audio / mpeg" /> <источник src = "audio / meow.ogg" type = "audio / ogg" /> </ Аудио>
Заметка Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать.
+
+В HTML5 audio элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. audio тег поддерживает атрибут controls . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример:
<audio id = "meowClip" элементы управления> <источник src = "audio / meow.mp3" type = "audio / mpeg" /> <источник src = "audio / meow.ogg" type = "audio / ogg" /> </ Аудио>
Заметка Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать.
+
## Instructions
- Пора отдохнуть от Camper Cat и познакомиться с кемпером Zersiax (@zersiax), чемпионом доступности и пользователем экрана. Чтобы услышать клип его экранного ридера в действии, добавьте audio элемент после p . Включите атрибут controls . Затем поместите source тег внутри audio тегов с атрибутом src установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и type атрибут «audio / mpeg». Заметка Звуковой клип может звучать быстро и быть трудно понятен, но это обычная скорость для пользователей с экрана.
+
+Пора отдохнуть от Camper Cat и познакомиться с кемпером Zersiax (@zersiax), чемпионом доступности и пользователем экрана. Чтобы услышать клип его экранного ридера в действии, добавьте audio элемент после p . Включите атрибут controls . Затем поместите source тег внутри audio тегов с атрибутом src установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и type атрибут «audio / mpeg». Заметка Звуковой клип может звучать быстро и быть трудно понятен, но это обычная скорость для пользователей с экрана.
+
-
-## Tests (Тесты)
+## Tests
```yml
tests:
- - text: В вашем коде должен быть один audio тег.
- testString: 'assert($("audio").length === 1, "Your code should have one audio tag.");'
- - text: 'Убедитесь, что ваш audio имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/[\s\S]*<\/audio>/g), "Make sure your audio element has a closing tag.");'
- - text: audio тег должен иметь атрибут controls .
- testString: 'assert($("audio").attr("controls"), "The audio tag should have the controls attribute.");'
- - text: Ваш код должен иметь один тег source .
- testString: 'assert($("source").length === 1, "Your code should have one source tag.");'
- - text: Ваш тег source должен находиться внутри audio тегов.
- testString: 'assert($("audio").children("source").length === 1, "Your source tag should be inside the audio tags.");'
- - text: Значение атрибута src в теге source должно точно соответствовать ссылке в инструкциях.
- testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the src attribute on the source tag should match the link in the instructions exactly.");'
- - text: Ваш код должен включать атрибут type в тег source со значением audio / mpeg.
- testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a type attribute on the source tag with a value of audio/mpeg.");'
+ - text: Your code should have one audio tag.
+ testString: assert($('audio').length === 1);
+ - text: Make sure your audio element has a closing tag.
+ testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/[\s\S]*<\/audio>/g));
+ - text: The audio tag should have the controls attribute.
+ testString: assert($('audio').attr('controls'));
+ - text: Your code should have one source tag.
+ testString: assert($('source').length === 1);
+ - text: Your source tag should be inside the audio tags.
+ testString: assert($('audio').children('source').length === 1);
+ - text: The value for the src attribute on the source tag should match the link in the instructions exactly.
+ testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');
+ - text: Your code should include a type attribute on the source tag with a value of audio/mpeg.
+ testString: assert($('source').attr('type') === 'audio/mpeg');
```
@@ -60,14 +63,23 @@ tests:
-
-
## Solution
-```js
-// здесь должно быть ваше решение
+```html
+
+
+
Real Coding Ninjas
+
+
+
A sound clip of Zersiax's screen reader in action.
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.russian.md
index 9f7e686063..9cb8649099 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.russian.md
@@ -2,37 +2,38 @@
id: 587d778a367417b2b2512aa5
title: Improve Chart Accessibility with the figure Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cGJMqtE
+forumTopicId: 301015
localeTitle: Улучшите читаемость диаграммы
---
## Description
-
- HTML5 представил элемент figure вместе со связанной figcaption. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту figure. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что figcaption идет внутри figure тегов и может быть объединен с другими элементами:
<Цифра> <img src = "roundhouseDestruction.jpeg" alt = "Фотография Кэмпер Кота, выполняющего удар с разворота"> <br> <Figcaption> Мастер Кэмпер Кот демонстрирует правильный удар с разворота. </ Figcaption> </ Цифра>
+
+HTML5 представил элемент figure вместе со связанной figcaption. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту figure. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что figcaption идет внутри figure тегов и может быть объединен с другими элементами:
<Цифра> <img src = "roundhouseDestruction.jpeg" alt = "Фотография Кэмпер Кота, выполняющего удар с разворота"> <br> <Figcaption> Мастер Кэмпер Кот демонстрирует правильный удар с разворота. </ Figcaption> </ Цифра>
+
## Instructions
- Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег div который он использовал для тега figure, и тэг p который окружает подпись к тегу figcaption.
-
+
+Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег div который он использовал для тега figure, и тэг p который окружает подпись к тегу figcaption.
+
## Tests
```yml
tests:
- - text: Ваш код должен иметь один figure тег.
- testString: 'assert($("figure").length == 1, "Your code should have one figure tag.");'
- - text: В вашем коде должен быть один тег figcaption .
- testString: 'assert($("figcaption").length == 1, "Your code should have one figcaption tag.");'
- - text: У вашего кода не должно быть никаких тегов div .
- testString: 'assert($("div").length == 0, "Your code should not have any div tags.");'
-
- - text: Ваш код не должен иметь каких - либо p - тегов.
-
- testString: 'assert($("p").length == 0, "Your code should not have any p tags.");'
- - text: figcaption должен быть дочерним элементом тега figure .
- testString: 'assert($("figure").children("figcaption").length == 1, "The figcaption should be a child of the figure tag.");'
- - text: 'Убедитесь, что ваш figure элемент имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/
/g).length, "Make sure your figure element has a closing tag.");'
+ - text: Your code should have one figure tag.
+ testString: assert($('figure').length == 1);
+ - text: Your code should have one figcaption tag.
+ testString: assert($('figcaption').length == 1);
+ - text: Your code should not have any div tags.
+ testString: assert($('div').length == 0);
+ - text: Your code should not have any p tags.
+ testString: assert($('p').length == 0);
+ - text: The figcaption should be a child of the figure tag.
+ testString: assert($('figure').children('figcaption').length == 1);
+ - text: Make sure your figure element has a closing tag.
+ testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/
/g).length);
```
@@ -58,13 +59,13 @@ tests:
-
+
Breakdown per week of time to spend training in stealth, combat, and weapons.
-
+
@@ -90,14 +91,53 @@ tests:
-
-
-## Solution (Решение)
+## Solution
-```js
-// ваше решение должно быть здесь
+```html
+
+
+
Training
+
+
+
+
+
+
+
+
+
+ Breakdown per week of time to spend training in stealth, combat, and weapons.
+
+
+
+
+
+
Stealth & Agility Training
+
Climb foliage quickly using a minimum spanning tree approach
+
No training is NP-complete without parkour
+
+
+
Combat Training
+
Dispatch multiple enemies with multithreaded tactics
+
Goodbye world: 5 proven ways to knock out an opponent
+
+
+
Weapons Training
+
Swords: the best tool to literally divide and conquer
+
Breadth-first or depth-first in multi-weapon training?
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.russian.md
index b46bb73ac5..398a74d617 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.russian.md
@@ -2,25 +2,30 @@
id: 587d778a367417b2b2512aa6
title: Improve Form Field Accessibility with the label Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cGJMMAN
+forumTopicId: 301016
localeTitle: Улучшить доступность поля формы с помощью элемента Element
---
## Description
- Улучшение доступности с семантической разметкой HTML применяется к использованию как соответствующих имен тегов, так и атрибутов. Следующие несколько проблем охватывают некоторые важные сценарии с использованием атрибутов в формах. label метки обертывают текст для определенного элемента управления формой, как правило это имя или ярлык для выбора. Это связывает смысл с элементом и делает форму более читаемой. for атрибут на label теге явно связывает этот label с контролем формы и используется для чтения с экрана. Вы узнали о переключателях и их ярлыках в уроке в разделе «Основы HTML». В этом уроке мы завернули элемент ввода переключателя внутри элемента label вместе с текстом ярлыка, чтобы сделать текст кликабельным. Другой способ добиться этого - использовать атрибут for как объяснено в этом уроке. Значение атрибута for должно быть таким же, как значение атрибута id элемента управления формой. Вот пример:
<Форма> <label for = "name"> Имя: </ label> <input type = "text" id = "name" name = "name"> </ Форма>
+
+Улучшение доступности с семантической разметкой HTML применяется к использованию как соответствующих имен тегов, так и атрибутов. Следующие несколько проблем охватывают некоторые важные сценарии с использованием атрибутов в формах. label метки обертывают текст для определенного элемента управления формой, как правило это имя или ярлык для выбора. Это связывает смысл с элементом и делает форму более читаемой. for атрибут на label теге явно связывает этот label с контролем формы и используется для чтения с экрана. Вы узнали о переключателях и их ярлыках в уроке в разделе «Основы HTML». В этом уроке мы завернули элемент ввода переключателя внутри элемента label вместе с текстом ярлыка, чтобы сделать текст кликабельным. Другой способ добиться этого - использовать атрибут for как объяснено в этом уроке. Значение атрибута for должно быть таким же, как значение атрибута id элемента управления формой. Вот пример:
<Форма> <label for = "name"> Имя: </ label> <input type = "text" id = "name" name = "name"> </ Форма>
+
## Instructions
- Camper Cat рассчитывает на большой интерес к его вдумчивым сообщениям в блоге и хочет включить форму для регистрации электронной почты. Добавьте for атрибут к label электронной почты, которая соответствует id на его input поле.
+
+Camper Cat рассчитывает на большой интерес к его вдумчивым сообщениям в блоге и хочет включить форму для регистрации электронной почты. Добавьте for атрибут к label электронной почты, которая соответствует id на его input поле.
+
## Tests
```yml
tests:
- - text: 'Ваш код должен иметь атрибут for в теге label, который не является пустым.'
- testString: 'assert($("label").attr("for"), "Your code should have a for attribute on the label tag that is not empty.");'
- - text: 'Значение атрибута for должно соответствовать значению id электронной почты input.'
- testString: 'assert($("label").attr("for") == "email", "Your for attribute value should match the id value on the email input.");'
+ - text: Your code should have a for attribute on the label tag that is not empty.
+ testString: assert($('label').attr('for'));
+ - text: Your for attribute value should match the id value on the email input.
+ testString: assert($('label').attr('for') == 'email');
```
@@ -69,14 +74,44 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
Deep Thoughts with Master Camper Cat
+
+
+
+
+
+
The Garfield Files: Lasagna as Training Fuel?
+
The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...
+
+
+
+
Defeating your Foe: the Red Dot is Ours!
+
Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...
+
+
+
+
Is Chuck Norris a Cat Person?
+
Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.russian.md
index d2caa8c300..f9cfecbcaf 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.russian.md
@@ -2,25 +2,30 @@
id: 587d778e367417b2b2512aab
title: Improve Readability with High Contrast Text
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cKb3nCq
+forumTopicId: 301017
localeTitle: Улучшить читаемость с помощью текста с высоким контрастом
---
## Description
- Низкий контраст между цветами текста и фона может затруднить чтение текста. Достаточный контраст улучшает читаемость вашего текста, но что именно означает «достаточный»? Рекомендации по доступности веб-содержимого (WCAG) рекомендуют коэффициент контрастности не ниже 4,5:1 для обычного текста. Отношение рассчитывается путем сравнения относительных значений яркости двух цветов. Оно колеблется от 1:1 для того же цвета или без контраста до 21:1 для белого против черного, самого сильного контраста. В Интернете доступно множество инструментов для проверки контраста, которые вычисляют это соотношение.
+
+Низкий контраст между цветами текста и фона может затруднить чтение текста. Достаточный контраст улучшает читаемость вашего текста, но что именно означает «достаточный»? Рекомендации по доступности веб-содержимого (WCAG) рекомендуют коэффициент контрастности не ниже 4,5:1 для обычного текста. Отношение рассчитывается путем сравнения относительных значений яркости двух цветов. Оно колеблется от 1:1 для того же цвета или без контраста до 21:1 для белого против черного, самого сильного контраста. В Интернете доступно множество инструментов для проверки контраста, которые вычисляют это соотношение.
+
## Instructions
- Camper Cat выбрал светло-серый текст на белом фоне для его недавнего сообщения в блоге, такая пара имеет коэффициент контрастности 1,5:1, что затрудняет чтение текста. Измените color текста с текущего серого ( #D3D3D3 ) на более темный серый ( #636363 ), чтобы улучшить коэффициент контрастности до 6:1.
+
+Camper Cat выбрал светло-серый текст на белом фоне для его недавнего сообщения в блоге, такая пара имеет коэффициент контрастности 1,5:1, что затрудняет чтение текста. Измените color текста с текущего серого ( #D3D3D3 ) на более темный серый ( #636363 ), чтобы улучшить коэффициент контрастности до 6:1.
+
## Tests
```yml
tests:
- - text: Ваш код должен изменить color текста для body на темный серый цвет.
- testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text color for the body to the darker gray.");'
- - text: Ваш код не должен изменять background-color для body .
- testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the background-color for the body.");'
+ - text: Your code should change the text color for the body to the darker gray.
+ testString: assert($('body').css('color') == 'rgb(99, 99, 99)');
+ - text: Your code should not change the background-color for the body.
+ testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)');
```
@@ -55,14 +60,30 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
Deep Thoughts with Master Camper Cat
+
+
+
A Word on the Recent Catnip Doping Scandal
+
The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.
+
As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.russian.md
index c07584b8e1..16611d96fe 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.russian.md
@@ -2,28 +2,31 @@
id: 587d774e367417b2b2512a9f
title: Jump Straight to the Content Using the main Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cPp7zuE
+forumTopicId: 301018
localeTitle: Перейти прямо к контенту, используя элемент main
---
## Description
-
- В HTML5 появилось несколько новых элементов, которые предоставляют разработчикам больше опций, а также включают функции доступности. Эти теги включают в себя main, header, footer, nav, article и section, среди прочих. По умолчанию браузер отображает эти элементы аналогично традиционному div . Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать на тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или вариантах навигации.
- Элемент main используется для обертывания (как вы уже догадались) основного содержимого, и на странице должно быть только один такой элемент. Он предназначен для того, чтобы обертывать информацию, связанную с центральной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. main тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному содержимому» в верхней части страницы, использование тега main автоматически предоставляет вспомогательные устройства, которые имеют функциональность.
+
+В HTML5 появилось несколько новых элементов, которые предоставляют разработчикам больше опций, а также включают функции доступности. Эти теги включают в себя main, header, footer, nav, article и section, среди прочих. По умолчанию браузер отображает эти элементы аналогично традиционному div . Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать на тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или вариантах навигации.
+ Элемент main используется для обертывания (как вы уже догадались) основного содержимого, и на странице должно быть только один такой элемент. Он предназначен для того, чтобы обертывать информацию, связанную с центральной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. main тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному содержимому» в верхней части страницы, использование тега main автоматически предоставляет вспомогательные устройства, которые имеют функциональность.
+
## Instructions
- Camper Cat имеет несколько больших идей для своей страницы оружия ниндзя. Помогите ему настроить свою разметку, добавив открывающие и закрывающие main-теги между header и footer (из других задач). Пока не оставляйте тег main пустым.
-
+
+Camper Cat имеет несколько больших идей для своей страницы оружия ниндзя. Помогите ему настроить свою разметку, добавив открывающие и закрывающие main-теги между header и footer (из других задач). Пока не оставляйте тег main пустым.
+
## Tests
```yml
tests:
- - text: В вашем коде должен быть один main тег.
- testString: 'assert($("main").length == 1, "В вашем коде должен быть один main тег.");'
- - text: main теги должны быть между закрывающем тегом header и открывающим тегом footer.
- testString: 'assert(code.match(/<\/header>\s*?\s*?<\/main>/gi), "main теги должны быть между закрывающем тегом header и открывающим тегом footer.");'
+ - text: Your code should have one main tag.
+ testString: assert($('main').length == 1);
+ - text: The main tags should be between the closing header tag and the opening footer tag.
+ testString: assert(code.match(/<\/header>\s*?\s*?<\/main>/gi));
```
@@ -47,14 +50,19 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
Weapons of the Ninja
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.russian.md
index 83af32ca14..4198ec8222 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.russian.md
@@ -2,25 +2,30 @@
id: 587d774c367417b2b2512a9d
title: Know When Alt Text Should be Left Blank
challengeType: 0
-videoUrl: ''
-localeTitle: 'Знать, когда Alt-текст должен оставаться пустым'
+videoUrl: https://scrimba.com/c/cM9P4t2
+forumTopicId: 301019
+localeTitle: Знать, когда Alt-текст должен оставаться пустым
---
## Description
- В последней задаче вы узнали, что включение атрибута alt в теги img является обязательным. Однако иногда изображения сгруппированы с надписью, уже описывающей их, или используются только для украшения. В этих случаях alt текст может показаться излишним или ненужным. В ситуациях, когда изображение уже объясняется текстовым контентом или не добавляет значения для страницы, img прежнему нуждается в атрибуте alt, но его можно установить в пустую строку. Вот пример: <img src="visualDecoration.jpeg" alt=""> Фоновые изображения обычно подпадают под «декоративную» метку. Тем не менее, они обычно применяются с правилами CSS и, следовательно, не являются частью процесса чтения расшифровок экрана. Заметка Для изображений с надписью вы можете захотеть включить текст alt, так как он помогает поисковым системам вносить в каталог содержимое изображения.
+
+В последней задаче вы узнали, что включение атрибута alt в теги img является обязательным. Однако иногда изображения сгруппированы с надписью, уже описывающей их, или используются только для украшения. В этих случаях alt текст может показаться излишним или ненужным. В ситуациях, когда изображение уже объясняется текстовым контентом или не добавляет значения для страницы, img прежнему нуждается в атрибуте alt, но его можно установить в пустую строку. Вот пример: <img src="visualDecoration.jpeg" alt=""> Фоновые изображения обычно подпадают под «декоративную» метку. Тем не менее, они обычно применяются с правилами CSS и, следовательно, не являются частью процесса чтения расшифровок экрана. Заметка Для изображений с надписью вы можете захотеть включить текст alt, так как он помогает поисковым системам вносить в каталог содержимое изображения.
+
## Instructions
- Camper Cat закодировал каркас страницы для части блога своего сайта. Он планирует добавить визуальный разрыв между двумя статьями с декоративным изображением самурайского меча. Добавьте атрибут alt в тег img и установите его в пустую строку. (Обратите внимание, что изображение src не связано с фактическим файлом - не беспокойтесь, что на дисплее нет мечей.)
+
+Camper Cat закодировал каркас страницы для части блога своего сайта. Он планирует добавить визуальный разрыв между двумя статьями с декоративным изображением самурайского меча. Добавьте атрибут alt в тег img и установите его в пустую строку. (Обратите внимание, что изображение src не связано с фактическим файлом - не беспокойтесь, что на дисплее нет мечей.)
+
## Tests
```yml
tests:
- - text: Ваш тег img должен иметь атрибут alt.
- testString: 'assert(!($("img").attr("alt") == undefined), "Your img tag should have an alt attribute.");'
- - text: Атрибут alt должен быть установлен в пустую строку.
- testString: 'assert($("img").attr("alt") == "", "The alt attribute should be set to an empty string.");'
+ - text: Your img tag should have an alt attribute.
+ testString: assert(!($('img').attr('alt') == undefined));
+ - text: The alt attribute should be set to an empty string.
+ testString: assert($('img').attr('alt') == '');
```
@@ -49,14 +54,24 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
Deep Thoughts with Master Camper Cat
+
+
Defeating your Foe: the Red Dot is Ours!
+
To Come...
+
+
+
+
+
+
Is Chuck Norris a Cat Person?
+
To Come...
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.russian.md
index e8a979dc5e..d3ff32a18e 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.russian.md
@@ -2,29 +2,34 @@
id: 587d778d367417b2b2512aaa
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cJ8QGkhJ
+forumTopicId: 301020
localeTitle: Сделать элементы доступными только для чтения с экрана с помощью пользовательского CSS
---
## Description
- Вы заметили, что все прикладные проблемы доступности до сих пор не использовали CSS? Это должно показать важность контура логического документа и использовать семантически значимые теги вокруг вашего контента, прежде чем вводить визуальный дизайн. Однако магия CSS также может улучшить доступность вашей страницы, когда вы хотите визуально скрывать контент, предназначенный только для чтения с экрана. Это происходит, когда информация находится в визуальном формате (например, диаграмме), но пользователям экрана чтения требуется альтернативная презентация (например, таблица) для доступа к данным. CSS используется для размещения элементов экрана только для чтения с визуальной области окна браузера. Вот пример правил CSS, которые это делают:
Заметка Следующие подходы CSS НЕ будут делать то же самое:
display: none; или visibility: hidden; скрывает контент для всех, включая пользователей с экрана
Нулевые значения для размеров пикселей, такие как width: 0px; height: 0px; удаляет этот элемент из потока вашего документа, то есть читатели экрана будут игнорировать его
+
+Вы заметили, что все прикладные проблемы доступности до сих пор не использовали CSS? Это должно показать важность контура логического документа и использовать семантически значимые теги вокруг вашего контента, прежде чем вводить визуальный дизайн. Однако магия CSS также может улучшить доступность вашей страницы, когда вы хотите визуально скрывать контент, предназначенный только для чтения с экрана. Это происходит, когда информация находится в визуальном формате (например, диаграмме), но пользователям экрана чтения требуется альтернативная презентация (например, таблица) для доступа к данным. CSS используется для размещения элементов экрана только для чтения с визуальной области окна браузера. Вот пример правил CSS, которые это делают:
Заметка Следующие подходы CSS НЕ будут делать то же самое:
display: none; или visibility: hidden; скрывает контент для всех, включая пользователей с экрана
Нулевые значения для размеров пикселей, такие как width: 0px; height: 0px; удаляет этот элемент из потока вашего документа, то есть читатели экрана будут игнорировать его
+
## Instructions
- Camper Cat создал действительно классную стеклянную гистограмму для своей учебной страницы и помещал данные в таблицу для своих слабовидящих пользователей. В таблице уже есть класс sr-only , но правила CSS еще не заполнены. Дайте position абсолютное значение, left значение a -10000px, а также width и height как значения 1px.
+
+Camper Cat создал действительно классную стеклянную гистограмму для своей учебной страницы и помещал данные в таблицу для своих слабовидящих пользователей. В таблице уже есть класс sr-only , но правила CSS еще не заполнены. Дайте position абсолютное значение, left значение a -10000px, а также width и height как значения 1px.
+
## Tests
```yml
tests:
- - text: Ваш код должен установить для свойства sr-only свойство position значение абсолютное.
- testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the position property of the sr-only class to a value of absolute.");'
- - text: Ваш код должен установить свойство left класса sr-only равным -10000px.
- testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the left property of the sr-only class to a value of -10000px.");'
- - text: Ваш код должен установить свойство width класса sr-only равным 1 пикселю.
- testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the width property of the sr-only class to a value of 1 pixel.");'
- - text: Ваш код должен установить свойство height класса sr-only равным 1 пикселю.
- testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the height property of the sr-only class to a value of 1 pixel.");'
+ - text: Your code should set the position property of the sr-only class to a value of absolute.
+ testString: assert($('.sr-only').css('position') == 'absolute');
+ - text: Your code should set the left property of the sr-only class to a value of -10000px.
+ testString: assert($('.sr-only').css('left') == '-10000px');
+ - text: Your code should set the width property of the sr-only class to a value of 1 pixel.
+ testString: assert(code.match(/width:\s*?1px/gi));
+ - text: Your code should set the height property of the sr-only class to a value of 1 pixel.
+ testString: assert(code.match(/height:\s*?1px/gi));
```
@@ -125,14 +130,96 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
Training
+
+
+
+
Master Camper Cat's Beginner Three Week Training Program
+
+
+
[Stacked bar chart]
+
+ Breakdown per week of time to spend training in stealth, combat, and weapons.
+
+
+
Hours of Weekly Training in Stealth, Combat, and Weapons
+
+
+
+
Stealth & Agility
+
Combat
+
Weapons
+
Total
+
+
+
+
+
Week One
+
3
+
5
+
2
+
10
+
+
+
Week Two
+
4
+
5
+
3
+
12
+
+
+
Week Three
+
4
+
6
+
3
+
13
+
+
+
+
+
+
Stealth & Agility Training
+
Climb foliage quickly using a minimum spanning tree approach
+
No training is NP-complete without parkour
+
+
+
Combat Training
+
Dispatch multiple enemies with multithreaded tactics
+
Goodbye, world: 5 proven ways to knock out an opponent
+
+
+
Weapons Training
+
Swords: the best tool to literally divide and conquer
+
Breadth-first or depth-first in multi-weapon training?
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.russian.md
index 6ad3a44fc7..458048a855 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.russian.md
@@ -7,10 +7,14 @@ localeTitle: Сделать ссылки навигационными с клю
---
## Description
- HTML предлагает атрибут accesskey для указания сочетания клавиш для активации или приведения фокуса к элементу. Это может сделать навигацию более эффективной для пользователей только для клавиатуры. HTML5 позволяет использовать этот атрибут для любого элемента, но особенно полезен, когда он используется с интерактивными. Сюда входят ссылки, кнопки и элементы управления формой. Вот пример: <button accesskey="b">Important Button</button>
+
+HTML предлагает атрибут accesskey для указания сочетания клавиш для активации или приведения фокуса к элементу. Это может сделать навигацию более эффективной для пользователей только для клавиатуры. HTML5 позволяет использовать этот атрибут для любого элемента, но особенно полезен, когда он используется с интерактивными. Сюда входят ссылки, кнопки и элементы управления формой. Вот пример: <button accesskey="b">Important Button</button>
+
## Instructions
- Camper Cat хочет, чтобы ссылки вокруг двух названий статей в блогах имели быстрые клавиши, чтобы пользователи сайта могли быстро перейти к полной истории. Добавьте атрибут accesskey к обоим ссылкам и установите первый для «g» (для Гарфилда), а второй - «c» (для Chuck Norris).
+
+Camper Cat хочет, чтобы ссылки вокруг двух названий статей в блогах имели быстрые клавиши, чтобы пользователи сайта могли быстро перейти к полной истории. Добавьте атрибут accesskey к обоим ссылкам и установите первый для «g» (для Гарфилда), а второй - «c» (для Chuck Norris).
+
## Tests
@@ -18,14 +22,13 @@ localeTitle: Сделать ссылки навигационными с клю
```yml
tests:
- text: Ваш код должен добавить атрибут accesskey к тегу a с id «first».
- testString: 'assert($("#first").attr("accesskey"), "Your code should add an accesskey attribute to the a tag with the id of "first".");'
+ testString: assert($('#first').attr('accesskey'));
- text: Ваш код должен добавить атрибут accesskey к тегу a с id «второй».
- testString: 'assert($("#second").attr("accesskey"), "Your code should add an accesskey attribute to the a tag with the id of "second".");'
+ testString: assert($('#second').attr('accesskey'));
- text: 'Ваш код должен установить атрибут accesskey в теге a с id «first» до «g». Обратите внимание, что дело имеет значение.'
- testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the accesskey attribute on the a tag with the id of "first" to "g". Note that case matters.");'
+ testString: assert($('#first').attr('accesskey') == 'g');
- text: 'Ваш код должен установить атрибут accesskey в теге a с id «second» до «c». Обратите внимание, что дело имеет значение.'
- testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the accesskey attribute on the a tag with the id of "second" to "c". Note that case matters.");'
-
+ testString: assert($('#second').attr('accesskey') == 'c');
```
@@ -63,14 +66,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.russian.md
index 57e72287a0..26671e272d 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.russian.md
@@ -2,27 +2,32 @@
id: 587d7788367417b2b2512aa3
title: Make Screen Reader Navigation Easier with the footer Landmark
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/crVrDh8
+forumTopicId: 301022
localeTitle: Улучшение навигации в Screen Reader с помощью нижнего колонтитула Landmark
---
## Description
- Подобно header и nav, элемент footer имеет встроенную функцию ориентира, которая позволяет вспомогательным устройствам быстро перейти к ней. Он в основном используется для хранения информации об авторских правах или ссылок на связанные документы, которые обычно располагаются внизу страницы.
+
+Подобно header и nav, элемент footer имеет встроенную функцию ориентира, которая позволяет вспомогательным устройствам быстро перейти к ней. Он в основном используется для хранения информации об авторских правах или ссылок на связанные документы, которые обычно располагаются внизу страницы.
+
## Instructions
- Учебная страница Camper Cat продвигается вперед. Измените div, который он использовал, чтобы связать свою информацию об авторских правах в нижней части страницы с элементом нижнего footer.
+
+Учебная страница Camper Cat продвигается вперед. Измените div, который он использовал, чтобы связать свою информацию об авторских правах в нижней части страницы с элементом нижнего footer.
+
## Tests
```yml
tests:
- - text: В вашем коде должен быть один footer тег.
- testString: 'assert($("footer").length == 1, "Your code should have one footer tag.");'
- - text: У вашего кода не должно быть никаких тегов div.
- testString: 'assert($("div").length == 0, "Your code should not have any div tags.");'
- - text: Ваш код должен иметь тег открытия и закрытия footer .
- testString: 'assert(code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
Training
+
+
+
+
+
Stealth & Agility Training
+
Climb foliage quickly using a minimum spanning tree approach
+
No training is NP-complete without parkour
+
+
+
Combat Training
+
Dispatch multiple enemies with multithreaded tactics
+
Goodbye world: 5 proven ways to knock out an opponent
+
+
+
Weapons Training
+
Swords: the best tool to literally divide and conquer
+
Breadth-first or depth-first in multi-weapon training?
+
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.russian.md
index 71e0b809dc..58dad4e252 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.russian.md
@@ -2,29 +2,34 @@
id: 587d7787367417b2b2512aa1
title: Make Screen Reader Navigation Easier with the header Landmark
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cB76vtv
+forumTopicId: 301023
localeTitle: Сделать экранную навигацию проще с заголовком Landmark
---
## Description
- Следующий элемент HTML5, который добавляет смысловое значение и улучшает доступность, является тегом header . Он используется для обертывания вводной информации или навигационных ссылок для своего родительского тега и хорошо работает вокруг контента, который повторяется вверху на нескольких страницах. header разделяет встроенную функцию ориентира, которую вы видели с main , позволяя вспомогательным технологиям быстро перейти к этому контенту. Заметка header предназначен для использования в теге body вашего HTML-документа. Это отличается от head элемента, который содержит заголовок страницы, мета - информации и т.д.
+
+Следующий элемент HTML5, который добавляет смысловое значение и улучшает доступность, является тегом header . Он используется для обертывания вводной информации или навигационных ссылок для своего родительского тега и хорошо работает вокруг контента, который повторяется вверху на нескольких страницах. header разделяет встроенную функцию ориентира, которую вы видели с main , позволяя вспомогательным технологиям быстро перейти к этому контенту. Заметка header предназначен для использования в теге body вашего HTML-документа. Это отличается от head элемента, который содержит заголовок страницы, мета - информации и т.д.
+
## Instructions
- Camper Cat пишет отличные статьи о тренировках ниндзя и хочет добавить страницу на свой сайт. Измените верхний div который в настоящее время содержит h1 для тега header .
+
+Camper Cat пишет отличные статьи о тренировках ниндзя и хочет добавить страницу на свой сайт. Измените верхний div который в настоящее время содержит h1 для тега header .
+
## Tests
```yml
tests:
- - text: Ваш код должен иметь один тег header .
- testString: 'assert($("header").length == 1, "Your code should have one header tag.");'
- - text: Ваши теги header должны обернуться вокруг h1 .
- testString: 'assert($("header").children("h1").length == 1, "Your header tags should wrap around the h1.");'
- - text: У вашего кода не должно быть никаких тегов div .
- testString: 'assert($("div").length == 0, "Your code should not have any div tags.");'
- - text: 'Убедитесь, что ваш элемент header имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(//g).length, "Make sure your header element has a closing tag.");'
+ - text: Your code should have one header tag.
+ testString: assert($('header').length == 1);
+ - text: Your header tags should wrap around the h1.
+ testString: assert($('header').children('h1').length == 1);
+ - text: Your code should not have any div tags.
+ testString: assert($('div').length == 0);
+ - text: Make sure your header element has a closing tag.
+ testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(//g).length);
```
@@ -66,14 +71,37 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
Training with Camper Cat
+
+
+
+
+
+
Stealth & Agility Training
+
Climb foliage quickly using a minimum spanning tree approach
+
No training is NP-complete without parkour
+
+
+
Combat Training
+
Dispatch multiple enemies with multithreaded tactics
+
Goodbye world: 5 proven ways to knock out an opponent
+
+
+
Weapons Training
+
Swords: the best tool to literally divide and conquer
+
Breadth-first or depth-first in multi-weapon training?
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.russian.md
index 12a85c1ed3..5b44d48536 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.russian.md
@@ -2,29 +2,34 @@
id: 587d7788367417b2b2512aa2
title: Make Screen Reader Navigation Easier with the nav Landmark
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/czVwWSv
+forumTopicId: 301024
localeTitle: Сделать навигацию с помощью экрана лучше с помощью навигационной системы Landmark
---
## Description
- Элемент nav - это еще один элемент HTML5 со встроенной функцией ориентира для удобной навигации на экране. Этот тег предназначен для обхода основных ссылок навигации на вашей странице. Если в нижней части страницы повторяются ссылки на сайты, нет необходимости разметки тегов с помощью тега nav . Использование footer (в следующей задаче) достаточно.
+
+Элемент nav - это еще один элемент HTML5 со встроенной функцией ориентира для удобной навигации на экране. Этот тег предназначен для обхода основных ссылок навигации на вашей странице. Если в нижней части страницы повторяются ссылки на сайты, нет необходимости разметки тегов с помощью тега nav . Использование footer (в следующей задаче) достаточно.
+
## Instructions
- Camper Cat включил навигационные ссылки в верхней части своей учебной страницы, но завернул их в div . Измените div на тег nav чтобы улучшить доступность на его странице.
+
+Camper Cat включил навигационные ссылки в верхней части своей учебной страницы, но завернул их в div . Измените div на тег nav чтобы улучшить доступность на его странице.
+
## Tests
```yml
tests:
- - text: В вашем коде должен быть один тег nav .
- testString: 'assert($("nav").length == 1, "Your code should have one nav tag.");'
- - text: Теги вашего nav должны быть обернуты вокруг ul и элементов списка.
- testString: 'assert($("nav").children("ul").length == 1, "Your nav tags should wrap around the ul and its list items.");'
- - text: У вашего кода не должно быть никаких тегов div .
- testString: 'assert($("div").length == 0, "Your code should not have any div tags.");'
- - text: 'Убедитесь, что ваш элемент nav имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
Training with Camper Cat
+
+
+
+
+
+
+
Stealth & Agility Training
+
Climb foliage quickly using a minimum spanning tree approach
+
No training is NP-complete without parkour
+
+
+
Combat Training
+
Dispatch multiple enemies with multithreaded tactics
+
Goodbye world: 5 proven ways to knock out an opponent
+
+
+
Weapons Training
+
Swords: the best tool to literally divide and conquer
+
Breadth-first or depth-first in multi-weapon training?
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.russian.md
index a630fe8292..877ba3035f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.russian.md
@@ -2,29 +2,34 @@
id: 587d778c367417b2b2512aa9
title: Standardize Times with the HTML5 datetime Attribute
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cmzMgtz
+forumTopicId: 301025
localeTitle: Стандартизировать время с атрибутом datetime HTML5
---
## Description
- Продолжая тему даты, HTML5 также представил элемент time вместе с атрибутом datetime для стандартизации времени. Это встроенный элемент, который может привязывать дату или время на странице. Действительный формат этой даты datetime атрибутом datetime . Это значение, доступное с помощью вспомогательных устройств. Это помогает избежать путаницы, заявляя стандартизированную версию времени, даже если она написана неформальным или разговорным образом в тексте. Вот пример: <p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
+
+Продолжая тему даты, HTML5 также представил элемент time вместе с атрибутом datetime для стандартизации времени. Это встроенный элемент, который может привязывать дату или время на странице. Действительный формат этой даты datetime атрибутом datetime . Это значение, доступное с помощью вспомогательных устройств. Это помогает избежать путаницы, заявляя стандартизированную версию времени, даже если она написана неформальным или разговорным образом в тексте. Вот пример: <p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
+
## Instructions
- Результаты опроса Camter Cat's Mortal Kombat в! Обведите тег time вокруг текста «Четверг, 15 сентября <sup> th </ sup>» и добавьте к нему атрибут datetime установленный в «2016-09-15».
+
+Результаты опроса Camter Cat's Mortal Kombat в! Обведите тег time вокруг текста «Четверг, 15 сентября <sup> th </ sup>» и добавьте к нему атрибут datetime установленный в «2016-09-15».
+
## Tests
```yml
tests:
- - text: 'Ваши теги time должны обтекать текст «Четверг, 15 сентября <sup> th </ sup>».'
- testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your time tags should wrap around the text "Thursday, September 15<sup>th</sup>".");'
- - text: Ваш тег time должен иметь атрибут datetime который не является пустым.
- testString: 'assert($("time").attr("datetime"), "Your time tag should have a datetime attribute that is not empty.");'
- - text: Ваш атрибут datetime должен быть установлен в значение 2016-09-15.
- testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your datetime attribute should be set to a value of 2016-09-15.");'
- - text: 'Убедитесь, что ваш элемент time имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your time element has a closing tag.");'
+ - text: Your code should have a p element which includes the text "Thank you to everyone for responding to Master Camper Cat's survey." and include a time element.
+ testString: assert(timeElement.length);
+ - text: Your added time tags should wrap around the text "Thursday, September 15<sup>th</sup>".
+ testString: assert(timeElement.length && $(timeElement).html().trim() === "Thursday, September 15th");
+ - text: Your added time tag should have a datetime attribute that is not empty.
+ testString: assert(datetimeAttr && datetimeAttr.length);
+ - text: Your added datetime attribute should be set to a value of 2016-09-15.
+ testString: assert(datetimeAttr === "2016-09-15");
```
@@ -72,14 +77,58 @@ tests:
+### After Tests
+
Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is . May the best ninja win!
+
+
+
+
+
Comments:
+
+
Posted by: Sub-Zero on
+
Johnny Cage better be there, I'll finish him!
+
+
+
Posted by: Doge on
+
Wow, much combat, so mortal.
+
+
+
Posted by: The Grim Reaper on
+
Looks like I'll be busy that day.
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.russian.md
index 9f1ddfd05c..930add9ff8 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.russian.md
@@ -2,25 +2,34 @@
id: 587d774d367417b2b2512a9e
title: Use Headings to Show Hierarchical Relationships of Content
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cqVEktm
+forumTopicId: 301026
localeTitle: Использовать заголовки для отображения иерархических отношений содержимого
---
## Description
- Заголовки (элементы от h1 до h6 ) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. Семантическое значение – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом h2 под которым идут несколько подразделов с элементом h4 будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент h1, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице.
+
+Заголовки (элементы от h1 до h6 ) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. Семантическое значение – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом h2 под которым идут несколько подразделов с элементом h4 будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент h1, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице.
+
## Instructions
- Camper Cat хочет, чтобы страница на его сайте была посвящена тому, как стать ниндзя. Помогите ему исправить заголовки так, чтобы его разметка придавала семантический смысл содержанию и показывала правильные отношения между родительскими и дочерними элементами его разделов. Измените все теги h5 на соответствующий уровень заголовка, чтобы указать, что они являются подразделами h2 .
+
+Camper Cat хочет, чтобы страница на его сайте была посвящена тому, как стать ниндзя. Помогите ему исправить заголовки так, чтобы его разметка придавала семантический смысл содержанию и показывала правильные отношения между родительскими и дочерними элементами его разделов. Измените все теги h5 на соответствующий уровень заголовка, чтобы указать, что они являются подразделами h2 .
+
## Tests
```yml
tests:
- - text: Ваш код должен иметь шесть тегов h3 .
- testString: 'assert($("h3").length === 6, "Your code should have six h3 tags.");'
- - text: В вашем коде не должно быть тегов h5 .
- testString: 'assert($("h5").length === 0, "Your code should not have any h5 tags.");'
+ - text: Your code should have 6 h3 tags.
+ testString: assert($("h3").length === 6);
+ - text: Your code should have 6 h3 closing tags.
+ testString: assert((code.match(/\/h3/g) || []).length===6);
+ - text: Your code should not have any h5 tags.
+ testString: assert($("h5").length === 0);
+ - text: Your code should not have any h5 closing tags.
+ testString: assert(/\/h5/.test(code)===false);
```
@@ -51,14 +60,26 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
How to Become a Ninja
+
+
Learn the Art of Moving Stealthily
+
How to Hide in Plain Sight
+
How to Climb a Wall
+
+
Learn the Art of Battle
+
How to Strengthen your Body
+
How to Fight like a Ninja
+
+
Learn the Art of Living with Honor
+
How to Breathe Properly
+
How to Simplify your Life
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.russian.md
index be0cfaaabf..1a682e3c51 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.russian.md
@@ -2,25 +2,30 @@
id: 587d7790367417b2b2512ab0
title: Use tabindex to Add Keyboard Focus to an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cmzMDHW
+forumTopicId: 301027
localeTitle: Использование tabindex для добавления фокуса клавиатуры к элементу
---
## Description
-tabindex HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена другим элементам, таким как div , span и p , поместив на них tabindex="0" . Вот пример: <div tabindex="0">I need keyboard focus!</div>Примечание. Отрицательное значение tabindex (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется div для всплывающего окна) и выходит за рамки этих задач.
+
+tabindex HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена другим элементам, таким как div , span и p , поместив на них tabindex="0" . Вот пример: <div tabindex="0">I need keyboard focus!</div>Примечание. Отрицательное значение tabindex (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется div для всплывающего окна) и выходит за рамки этих задач.
+
## Instructions
- Camper Cat создал новый опрос для сбора информации о своих пользователях. Он знает, что поля ввода автоматически получают фокус клавиатуры, но он хочет убедиться, что его пользователи клавиатуры приостанавливаются при выполнении инструкций при перемещении элементов. Добавьте атрибут tabindex к тегу p и установите его значение «0». Бонус - использование tabindex также позволяет псевдо-классу CSS :focus работать p тегом p .
+
+Camper Cat создал новый опрос для сбора информации о своих пользователях. Он знает, что поля ввода автоматически получают фокус клавиатуры, но он хочет убедиться, что его пользователи клавиатуры приостанавливаются при выполнении инструкций при перемещении элементов. Добавьте атрибут tabindex к тегу p и установите его значение «0». Бонус - использование tabindex также позволяет псевдо-классу CSS :focus работать p тегом p .
+
## Tests
```yml
tests:
- - text: Ваш код должен добавить атрибут tabindex к тегу p который содержит инструкции формы.
- testString: 'assert($("p").attr("tabindex"), "Your code should add a tabindex attribute to the p tag that holds the form instructions.");'
- - text: Ваш код должен установить атрибут tabindex в теге p равным 0.
- testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the tabindex attribute on the p tag to a value of 0.");'
+ - text: Your code should add a tabindex attribute to the p tag that holds the form instructions.
+ testString: assert($('p').attr('tabindex'));
+ - text: Your code should set the tabindex attribute on the p tag to a value of 0.
+ testString: assert($('p').attr('tabindex') == '0');
```
@@ -84,14 +89,59 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
Ninja Survey
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.russian.md
index 8913581783..bbf1169542 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.russian.md
@@ -2,7 +2,8 @@
id: 587d7790367417b2b2512ab1
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
challengeType: 0
-videoUrl: 'https://scrimba.com/c/cmzRRcb'
+videoUrl: https://scrimba.com/c/cmzRRcb
+forumTopicId: 301028
localeTitle: Использование tabindex для указания порядка фокуса клавиатуры для нескольких элементов
---
@@ -26,14 +27,14 @@ Camper Cat имеет поле поиска на странице Вдохнов
```yml
tests:
- - text: 'Ваш код должен добавить к тегу input атрибут tabindex.'
- testString: 'assert($("#search").attr("tabindex"), "Your code should add a tabindex attribute to the search input tag.");'
- - text: 'Ваш код должен добавить атрибут tabindex в тег submit input.'
- testString: 'assert($("#submit").attr("tabindex"), "Your code should add a tabindex attribute to the submit input tag.");'
- - text: 'Ваш код должен установить атрибут tabindex в теге input для поиска <значение> к значению 1.'
- testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the tabindex attribute on the search input tag to a value of 1.");'
- - text: 'Ваш код должен установить атрибут tabindex в теге отправки input значение 2.'
- testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the tabindex attribute on the submit input tag to a value of 2.");'
+ - text: Your code should add a tabindex attribute to the search input tag.
+ testString: assert($('#search').attr('tabindex'));
+ - text: Your code should add a tabindex attribute to the submit input tag.
+ testString: assert($('#submit').attr('tabindex'));
+ - text: Your code should set the tabindex attribute on the search input tag to a value of 1.
+ testString: assert($('#search').attr('tabindex') == '1');
+ - text: Your code should set the tabindex attribute on the submit input tag to a value of 2.
+ testString: assert($('#submit').attr('tabindex') == '2');
```
@@ -81,14 +82,43 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
Even Deeper Thoughts with Master Camper Cat
+
+
+
+
Inspirational Quotes
+
+
“There's no Theory of Evolution, just a list of creatures I've allowed to live.”
+ - Chuck Norris
+
+
+
“Wise men say forgiveness is divine, but never pay full price for late pizza.”
+ - TMNT
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.russian.md
index bfb2d089cc..4c022d1b2c 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.russian.md
@@ -2,7 +2,8 @@
id: 587d774e367417b2b2512aa0
title: Wrap Content in the article Element
challengeType: 0
-videoUrl: 'https://scrimba.com/c/cPp79S3'
+videoUrl: https://scrimba.com/c/cPp79S3
+forumTopicId: 301029
localeTitle: Оборачивание контента в элемент article
---
@@ -16,17 +17,19 @@ localeTitle: Оборачивание контента в элемент article
## Instructions
- Camper Cat использовал теги article для обертывания сообщений на своей странице блога, но он забыл использовать их в верхней части. Измените тег div чтобы вместо этого использовать тег article.
+
+Camper Cat использовал теги article для обертывания сообщений на своей странице блога, но он забыл использовать их в верхней части. Измените тег div чтобы вместо этого использовать тег article.
+
## Tests
```yml
tests:
- - text: Ваш код должен содержать три тега article.
- testString: 'assert($("article").length == 3, "Your code should have three article tags.");'
- - text: У вашего кода не должно быть никаких тегов div.
- testString: 'assert($("div").length == 0, "Your code should not have any div tags.");'
+ - text: Your code should have three article tags.
+ testString: assert($('article').length == 3);
+ - text: Your code should not have any div tags.
+ testString: assert($('div').length == 0);
```
@@ -64,14 +67,33 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
Deep Thoughts with Master Camper Cat
+
+
+
The Garfield Files: Lasagna as Training Fuel?
+
The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...
+
+
+
+
+
+
Defeating your Foe: the Red Dot is Ours!
+
Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...
+
+
+
+
+
+
Is Chuck Norris a Cat Person?
+
Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.russian.md
index a2bd5b0474..d3a8f13f28 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.russian.md
@@ -2,31 +2,36 @@
id: 587d778b367417b2b2512aa7
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cVJVefw
+forumTopicId: 301030
localeTitle: Обтекание переключателей в элементе Fieldset для лучшей доступности
---
## Description
- Следующая тема охватывает доступность переключателей. Каждый выбор дается label с for атрибутом привязки к id соответствующего пункта, как рассматривалось в последней задаче. Поскольку радиокнопки часто входят в группу, где пользователь должен выбрать одну, есть способ семантически показать, что выбор является частью набора. Тег fieldset окружает всю группу переключателей для достижения этого. Он часто использует тег legend чтобы предоставить описание для группировки, которое считывается программами чтения с экрана для каждого выбора в элементе fieldset. fieldset и тег legend не нужны, если выбор не требует пояснений, например, гендерный выбор. Использование label с for атрибута для каждого переключателя достаточно. Вот пример:
<form> <fieldset> <legend> Выберите один из этих трех элементов: </ legend> <input id = "one" type = "radio" name = "items" value = "one"> <label for = "one"> Выбор 1 </ label> <br> <input id = "two" type = "radio" name = "items" value = "two"> <label for = "two"> Выбор 2 </ label> <br> <input id = "three" type = "radio" name = "items" value = "three"> <label for = "three"> Choice Three </ label> </ fieldset> </ form>
+
+Следующая тема охватывает доступность переключателей. Каждый выбор дается label с for атрибутом привязки к id соответствующего пункта, как рассматривалось в последней задаче. Поскольку радиокнопки часто входят в группу, где пользователь должен выбрать одну, есть способ семантически показать, что выбор является частью набора. Тег fieldset окружает всю группу переключателей для достижения этого. Он часто использует тег legend чтобы предоставить описание для группировки, которое считывается программами чтения с экрана для каждого выбора в элементе fieldset. fieldset и тег legend не нужны, если выбор не требует пояснений, например, гендерный выбор. Использование label с for атрибута для каждого переключателя достаточно. Вот пример:
<form> <fieldset> <legend> Выберите один из этих трех элементов: </ legend> <input id = "one" type = "radio" name = "items" value = "one"> <label for = "one"> Выбор 1 </ label> <br> <input id = "two" type = "radio" name = "items" value = "two"> <label for = "two"> Выбор 2 </ label> <br> <input id = "three" type = "radio" name = "items" value = "three"> <label for = "three"> Choice Three </ label> </ fieldset> </ form>
+
## Instructions
- Camper Cat хочет получить информацию о уровне ниндзя своих пользователей, когда они регистрируются в его списке электронной почты. Он добавил набор переключателей и узнал из нашего последнего урока, чтобы использовать метки меток for атрибутов для каждого выбора. Вперед Camper Cat! Однако его код по-прежнему нуждается в некоторой помощи. Измените тег div окружающий радиокнопки, на тег fieldset и измените тег p внутри него на legend.
+
+Camper Cat хочет получить информацию о уровне ниндзя своих пользователей, когда они регистрируются в его списке электронной почты. Он добавил набор переключателей и узнал из нашего последнего урока, чтобы использовать метки меток for атрибутов для каждого выбора. Вперед Camper Cat! Однако его код по-прежнему нуждается в некоторой помощи. Измените тег div окружающий радиокнопки, на тег fieldset и измените тег p внутри него на legend.
+
## Tests
```yml
tests:
- - text: Ваш код должен иметь тег fieldset вокруг установленного переключателя.
- testString: 'assert($("fieldset").length == 1, "Your code should have a fieldset tag around the radio button set.");'
- - text: 'Убедитесь, что ваш элемент fieldset имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
Deep Thoughts with Master Camper Cat
+
+
+
+
+
+
The Garfield Files: Lasagna as Training Fuel?
+
The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...
+
+
+
+
Defeating your Foe: the Red Dot is Ours!
+
Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...
+
+
+
+
Is Chuck Norris a Cat Person?
+
Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.russian.md
index da0d9d604c..3adb4fb16a 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.russian.md
@@ -2,31 +2,30 @@
id: 587d781b367417b2b2512abe
title: Add a box-shadow to a Card-like Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cvVZdUd
+forumTopicId: 301031
localeTitle: Добавьте тень к карточному элементу
---
## Description
-
-
- Свойство box-shadow применяет одну или несколько теней к элементу. Свойство box-shadow принимает значения для offset-x (как далеко отбрасывать тень горизонтально от элемента), offset-y (как далеко отбрасывать тень вертикально от элемента), blur-radiusspread-radius и значения цвета в этом порядке. Значения blur-radius и spread-radius необязательны. Вот пример CSS для создания нескольких теней с некоторым размытием в основном прозрачных черных цветах:
-
+
+Свойство box-shadow применяет одну или несколько теней к элементу. Свойство box-shadow принимает значения для offset-x (как далеко отбрасывать тень горизонтально от элемента), offset-y (как далеко отбрасывать тень вертикально от элемента), blur-radiusspread-radius и значения цвета в этом порядке. Значения blur-radius и spread-radius необязательны. Вот пример CSS для создания нескольких теней с некоторым размытием в основном прозрачных черных цветах:
+
## Instructions
- Элемент теперь имеет идентификатор thumbnail. С помощью этого селектора используйте приведенные выше примеры CSS, чтобы применить box-shadow к карточке.
+
+Элемент теперь имеет идентификатор thumbnail. С помощью этого селектора используйте приведенные выше примеры CSS, чтобы применить box-shadow к карточке.
+
## Tests
```yml
tests:
-
-
- - text: Ваш код должен добавить свойство box-shadow для идентификатора thumbnail.
-
- testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a box-shadow property for the thumbnail id.");'
- - text: Вы должны использовать данный CSS для значения box-shadow.
- testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the box-shadow value.");'
+ - text: Your code should add a box-shadow property for the thumbnail id.
+ testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
+ - text: You should use the given CSS for the box-shadow value.
+ testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi));
```
@@ -87,14 +86,56 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Alphabet
+
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.russian.md
index aa95f8c416..0ae927d73f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.russian.md
@@ -2,27 +2,32 @@
id: 587d781b367417b2b2512abc
title: Adjust the background-color Property of Text
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cEDqwA6
+forumTopicId: 301032
localeTitle: Отрегулируйте фоновый цвет Свойство текста
---
## Description
- Вместо исправления общего фона или цвета текста, для читаемости переднего плана вы можете добавить background-color к элементу, содержащему текст, который вы хотите подчеркнуть. Эта проблема использует rgba() вместо hex кодов или нормальный rgb() .
rgba акроним расшифровывается как: r = красный g = зеленый b = синий a = альфа / уровень непрозрачности
Значения RGB могут находиться в диапазоне от 0 до 255. Значение альфа может варьироваться от 1, полностью непрозрачного или сплошного цвета, до 0, что является полностью прозрачным или невидимым. rgba() отлично подходит для использования в этом случае, так как он позволяет вам регулировать непрозрачность. Это означает, что вам не нужно полностью блокировать фон. Для этой задачи вы будете использовать background-color: rgba(45, 45, 45, 0.1) . Он производит темно-серый цвет, который почти прозрачен, учитывая низкое значение непрозрачности 0,1.
+
+Вместо исправления общего фона или цвета текста, для читаемости переднего плана вы можете добавить background-color к элементу, содержащему текст, который вы хотите подчеркнуть. Эта проблема использует rgba() вместо hex кодов или нормальный rgb() .
rgba акроним расшифровывается как: r = красный g = зеленый b = синий a = альфа / уровень непрозрачности
Значения RGB могут находиться в диапазоне от 0 до 255. Значение альфа может варьироваться от 1, полностью непрозрачного или сплошного цвета, до 0, что является полностью прозрачным или невидимым. rgba() отлично подходит для использования в этом случае, так как он позволяет вам регулировать непрозрачность. Это означает, что вам не нужно полностью блокировать фон. Для этой задачи вы будете использовать background-color: rgba(45, 45, 45, 0.1) . Он производит темно-серый цвет, который почти прозрачен, учитывая низкое значение непрозрачности 0,1.
+
## Instructions
- Чтобы текст сильнее выделялся, отрегулируйте background-color элемента h4 на заданное значение rgba() . Также для h4 удалите свойство height и добавьте padding 10px.
+
+Чтобы текст сильнее выделялся, отрегулируйте background-color элемента h4 на заданное значение rgba() . Также для h4 удалите свойство height и добавьте padding 10px.
+
## Tests
```yml
tests:
- - text: 'Ваш код должен добавить свойство background-color к элементу h4 установленному в rgba(45, 45, 45, 0.1) .'
- testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).");'
- - text: Ваш код должен добавить свойство padding к элементу h4 и установить его на 10 пикселей.
- testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a padding property to the h4 element and set it to 10 pixels.");'
- - text: Свойство height в элементе h4 должно быть удалено.
- testString: 'assert(!($("h4").css("height") == "25px"), "The height property on the h4 element should be removed.");'
+ - text: Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).
+ testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi));
+ - text: Your code should add a padding property to the h4 element and set it to 10 pixels.
+ testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px');
+ - text: The height property on the h4 element should be removed.
+ testString: assert(!($('h4').css('height') == '25px'));
```
@@ -80,14 +85,52 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Alphabet
+
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.russian.md
index 38f2b4bef5..34254466c3 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.russian.md
@@ -2,29 +2,34 @@
id: 587d78a4367417b2b2512ad3
title: Adjust the Color of Various Elements to Complementary Colors
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cWmPpud
+forumTopicId: 301033
localeTitle: Отрегулируйте цвет различных элементов для дополнительных цветов
---
## Description
- Задача «Дополнительные цвета» показала, что противоположные цвета на цветовом круге могут сделать друг друга более сочными, когда они расположены бок о бок. Однако сильный визуальный контраст может быть слишком резким, если он чрезмерно используется на веб-сайте и иногда может сделать текст более трудным для чтения, если он размещен на фоне дополнительного цвета. На практике один из цветов обычно доминирует, а дополнительный используется для привлечения внимания к определенному контенту на странице.
+
+Задача «Дополнительные цвета» показала, что противоположные цвета на цветовом круге могут сделать друг друга более сочными, когда они расположены бок о бок. Однако сильный визуальный контраст может быть слишком резким, если он чрезмерно используется на веб-сайте и иногда может сделать текст более трудным для чтения, если он размещен на фоне дополнительного цвета. На практике один из цветов обычно доминирует, а дополнительный используется для привлечения внимания к определенному контенту на странице.
+
## Instructions
- Эта страница будет использовать сине-зеленый оттенок ( #09A7A1 ) в качестве доминирующего цвета, а дополняющий его оранжевый ( #FF790E ) для визуального выделения кнопок sign-up. Измените background-color обоих элементов header и footer с черного на сине-зеленый. Затем также измените color текста h2 на сине-зеленый. Наконец, измените background-colorbutton на оранжевый цвет.
+
+Эта страница будет использовать сине-зеленый оттенок ( #09A7A1 ) в качестве доминирующего цвета, а дополняющий его оранжевый ( #FF790E ) для визуального выделения кнопок sign-up. Измените background-color обоих элементов header и footer с черного на сине-зеленый. Затем также измените color текста h2 на сине-зеленый. Наконец, измените background-colorbutton на оранжевый цвет.
+
## Tests
```yml
tests:
- - text: 'Элемент header должен иметь background-color # 09A7A1.'
- testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The header element should have a background-color of #09A7A1.");'
- - text: 'Элемент нижнего footer должен иметь background-color # 09A7A1.'
- testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The footer element should have a background-color of #09A7A1.");'
- - text: 'Элемент h2 должен иметь color # 09A7A1.'
- testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The h2 element should have a color of #09A7A1.");'
- - text: 'Элемент button должен иметь background-color # FF790E.'
- testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The button element should have a background-color of #FF790E.");'
+ - text: 'The header element should have a background-color of #09A7A1.'
+ testString: assert($('header').css('background-color') == 'rgb(9, 167, 161)');
+ - text: 'The footer element should have a background-color of #09A7A1.'
+ testString: assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
+ - text: 'The h2 element should have a color of #09A7A1.'
+ testString: assert($('h2').css('color') == 'rgb(9, 167, 161)');
+ - text: 'The button element should have a background-color of #FF790E.'
+ testString: assert($('button').css('background-color') == 'rgb(255, 121, 14)');
```
@@ -79,14 +84,50 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
Cooking with FCC!
+
+
+
+
Machine Learning in the Kitchen
+
Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like fetch Pringles.
+
+
+
+
Bisection Vegetable Chopping
+
This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.russian.md
index 18796b84f7..7d6ef0c060 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.russian.md
@@ -2,23 +2,28 @@
id: 587d7791367417b2b2512ab5
title: Adjust the Height of an Element Using the height Property
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cEDaDTN
+forumTopicId: 301034
localeTitle: Отрегулируйте высоту элемента с помощью свойства height
---
## Description
- Вы можете указать высоту элемента, используя свойство height в CSS, подобное свойству width . Вот пример, который изменяет высоту изображения на 20 пикселей:
img { height: 20 px; }
+
+Вы можете указать высоту элемента, используя свойство height в CSS, подобное свойству width . Вот пример, который изменяет высоту изображения на 20 пикселей:
img { height: 20 px; }
+
## Instructions
- Добавьте свойство height в тег h4 и установите его на 25 пикселей.
+
+Добавьте свойство height в тег h4 и установите его на 25 пикселей.
+
## Tests
```yml
tests:
- - text: Ваш код должен изменить свойство h4height на значение 25 пикселей.
- testString: 'assert($("h4").css("height") == "25px", "Your code should change the h4height property to a value of 25 pixels.");'
+ - text: Your code should change the h4height property to a value of 25 pixels.
+ testString: assert($('h4').css('height') === '25px' && /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
```
@@ -70,14 +75,47 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Google
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.russian.md
index 7dc231e9f1..3e4ced86d1 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.russian.md
@@ -2,27 +2,30 @@
id: 587d781d367417b2b2512ac8
title: Adjust the Hover State of an Anchor Tag
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cakRGcm
+forumTopicId: 301035
localeTitle: Отрегулируйте состояние ссылок при наведении курсора
---
## Description
-
- Эта проблема будет касаться использования псевдоклассов. Псевдокласс - это ключевое слово, которое можно добавить в селектор, чтобы выбрать конкретное состояние элемента. Например, стиль тега привязки может быть изменен для его состояния зависания с помощью селектора псевдо-класса :hover . Вот CSS, чтобы изменить color привязанного тега на красный во время наведения на него:
a: hover { красный цвет; }
-
+
+Эта проблема будет касаться использования псевдоклассов. Псевдокласс - это ключевое слово, которое можно добавить в селектор, чтобы выбрать конкретное состояние элемента. Например, стиль тега привязки может быть изменен для его состояния зависания с помощью селектора псевдо-класса :hover . Вот CSS, чтобы изменить color привязанного тега на красный во время наведения на него:
a: hover { красный цвет; }
+
## Instructions
- Редактор кода имеет правило CSS в стиле все a теги черный. Добавьте правила, так чтобы когда пользователь наводит на a тег, то color становился синим.
+
+Редактор кода имеет правило CSS в стиле все a теги черный. Добавьте правила, так чтобы когда пользователь наводит на a тег, то color становился синим.
+
## Tests
```yml
tests:
- - text: 'color метки привязки должен оставаться черным, добавьте только правила CSS для состояния :hover.'
- testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag color should remain black, only add CSS rules for the :hover state.");'
- - text: Якорная метка должна иметь color синего цвета при наведении.
- testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a color of blue on hover.");'
+ - text: The anchor tag color should remain black, only add CSS rules for the :hover state.
+ testString: assert($('a').css('color') == 'rgb(0, 0, 0)');
+ - text: The anchor tag should have a color of blue on hover.
+ testString: assert(code.match(/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi));
```
@@ -48,14 +51,21 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+CatPhotoApp
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.russian.md
index 20518921fa..ea7cabb3c8 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.russian.md
@@ -2,33 +2,38 @@
id: 587d78a4367417b2b2512ad4
title: Adjust the Hue of a Color
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cPp38TZ
+forumTopicId: 301036
localeTitle: Отрегулируйте оттенок цвета
---
## Description
- Цвета имеют несколько характеристик, включая оттенок, насыщенность и легкость. CSS3 представила hsl() как альтернативный способ выбрать цвет, указав непосредственно эти характеристики. Хюэ - это то, что люди обычно считают «цветным». Если вы изображаете спектр цветов, начиная с красного слева, перемещаясь по зеленому посередине, а синий справа, оттенок - это то, где цвет соответствует этой линии. В hsl() оттенок использует концепцию цветового круга вместо спектра, где угол цвета на круге задается как значение от 0 до 360. Насыщенность - это количество серого цвета. Полностью насыщенный цвет не имеет серого цвета, а минимально насыщенный цвет почти полностью серый. Это задается в процентах, при этом 100% полностью насыщенный. Легкость - это количество белого или черного цвета. Процент задается от 0% (черный) до 100% (белый), где 50% - это нормальный цвет. Вот несколько примеров использования hsl() с полностью насыщенными, нормальными цветами легкости:
цвет
HSL
красный
hsl (0, 100%, 50%)
желтый
hsl (60, 100%, 50%)
зеленый
hsl (120, 100%, 50%)
циан
hsl (180, 100%, 50%)
синий
hsl (240, 100%, 50%)
фуксин
hsl (300, 100%, 50%)
+
+Цвета имеют несколько характеристик, включая оттенок, насыщенность и легкость. CSS3 представила hsl() как альтернативный способ выбрать цвет, указав непосредственно эти характеристики. Хюэ - это то, что люди обычно считают «цветным». Если вы изображаете спектр цветов, начиная с красного слева, перемещаясь по зеленому посередине, а синий справа, оттенок - это то, где цвет соответствует этой линии. В hsl() оттенок использует концепцию цветового круга вместо спектра, где угол цвета на круге задается как значение от 0 до 360. Насыщенность - это количество серого цвета. Полностью насыщенный цвет не имеет серого цвета, а минимально насыщенный цвет почти полностью серый. Это задается в процентах, при этом 100% полностью насыщенный. Легкость - это количество белого или черного цвета. Процент задается от 0% (черный) до 100% (белый), где 50% - это нормальный цвет. Вот несколько примеров использования hsl() с полностью насыщенными, нормальными цветами легкости:
цвет
HSL
красный
hsl (0, 100%, 50%)
желтый
hsl (60, 100%, 50%)
зеленый
hsl (120, 100%, 50%)
циан
hsl (180, 100%, 50%)
синий
hsl (240, 100%, 50%)
фуксин
hsl (300, 100%, 50%)
+
## Instructions
- Измените background-color каждого элемента div на основе имен классов ( green, cyan или blue ) с помощью hsl(). Все три должны иметь полную насыщенность и нормальную легкость.
+
+Измените background-color каждого элемента div на основе имен классов ( green, cyan или blue ) с помощью hsl(). Все три должны иметь полную насыщенность и нормальную легкость.
+
## Tests
```yml
tests:
- - text: Ваш код должен использовать hsl() чтобы объявить зеленый цвет.
- testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the hsl() property to declare the color green.");'
- - text: Ваш код должен использовать hsl() для объявления цвета морской волны.
- testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the hsl() property to declare the color cyan.");'
- - text: Ваш код должен использовать hsl() для объявления синего цвета.
- testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the hsl() property to declare the color blue.");'
- - text: 'div элемент с классом green должен иметь background-color зеленый.'
- testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The div element with class green should have a background-color of green.");'
- - text: 'div элемент с классом green должен иметь background-color морской волны.'
- testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The div element with class cyan should have a background-color of cyan.");'
- - text: 'div элемент с классом green должен иметь background-color синий.'
- testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The div element with class blue should have a background-color of blue.");'
+ - text: Your code should use the hsl() property to declare the color green.
+ testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
+ - text: Your code should use the hsl() property to declare the color cyan.
+ testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
+ - text: Your code should use the hsl() property to declare the color blue.
+ testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
+ - text: The div element with class green should have a background-color of green.
+ testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
+ - text: The div element with class cyan should have a background-color of cyan.
+ testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
+ - text: The div element with class blue should have a background-color of blue.
+ testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
```
@@ -72,14 +77,38 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.russian.md
index f2e43867b7..f169d1c20d 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.russian.md
@@ -2,23 +2,28 @@
id: 587d781b367417b2b2512abd
title: Adjust the Size of a Header Versus a Paragraph Tag
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c3bRPTz
+forumTopicId: 301037
localeTitle: Отрегулируйте размер заголовка в сравнении с тегом абзаца
---
## Description
- Размер шрифта тегов заголовков (от h1 до h6 ) обычно должен быть больше размера шрифта тегов абзаца. Это облегчает пользователю визуальное понимание макета и уровня важности всего содержимого на странице. Для изменения размера текста в элементе используется свойство font-size.
+
+Размер шрифта тегов заголовков (от h1 до h6 ) обычно должен быть больше размера шрифта тегов абзаца. Это облегчает пользователю визуальное понимание макета и уровня важности всего содержимого на странице. Для изменения размера текста в элементе используется свойство font-size.
+
## Instructions
- Чтобы заголовок был значительно больше абзаца, измените font-size тега h4 на 27 пикселей.
+
+Чтобы заголовок был значительно больше абзаца, измените font-size тега h4 на 27 пикселей.
+
## Tests
```yml
tests:
- - text: Ваш код должен добавить свойство font-size к элементу h4 установленному в 27 пикселей.
- testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a font-size property to the h4 element set to 27 pixels.");'
+ - text: Your code should add a font-size property to the h4 element set to 27 pixels.
+ testString: assert($('h4').css('font-size') == '27px');
```
@@ -76,14 +81,53 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Alphabet
+
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.russian.md
index eb403f758e..42370b785b 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.russian.md
@@ -2,23 +2,28 @@
id: 587d78a4367417b2b2512ad5
title: Adjust the Tone of a Color
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cEDJvT7
+forumTopicId: 301038
localeTitle: Отрегулируйте тон цвета
---
## Description
- Опция hsl() в CSS также упрощает настройку тона цвета. Смешение белого цвета с чистым оттенком создает оттенок этого цвета, а добавление черного оттенка сделает оттенок. В качестве альтернативы, тон создается путем добавления серого или как под тонировку, так и как затенение. Напомним, что 's' и 'l' в hsl() означают насыщенность и легкость соответственно. Процент насыщения изменяет количество серого, а процент света определяет, сколько белого или черного цвета. Это полезно, когда у вас есть базовый оттенок, который вам нравится, но ему нужны разные варианты.
+
+Опция hsl() в CSS также упрощает настройку тона цвета. Смешение белого цвета с чистым оттенком создает оттенок этого цвета, а добавление черного оттенка сделает оттенок. В качестве альтернативы, тон создается путем добавления серого или как под тонировку, так и как затенение. Напомним, что 's' и 'l' в hsl() означают насыщенность и легкость соответственно. Процент насыщения изменяет количество серого, а процент света определяет, сколько белого или черного цвета. Это полезно, когда у вас есть базовый оттенок, который вам нравится, но ему нужны разные варианты.
+
## Instructions
- Навигационная панель на этом сайте в настоящее время наследует свой background-color от элемента header. Начиная с этого цвета в качестве базы, добавьте background-color к элементу nav так чтобы он использовал тот же голубой оттенок, но имел 80% насыщенности и 25% значения яркости, чтобы изменить его тон и оттенок.
+
+Навигационная панель на этом сайте в настоящее время наследует свой background-color от элемента header. Начиная с этого цвета в качестве базы, добавьте background-color к элементу nav так чтобы он использовал тот же голубой оттенок, но имел 80% насыщенности и 25% значения яркости, чтобы изменить его тон и оттенок.
+
## Tests
```yml
tests:
- - text: Элемент nav должен иметь background-color настроенного голубого тона с использованием hsl().
- testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The nav element should have a background-color of the adjusted cyan tone using the hsl() property.");'
+ - text: The nav element should have a background-color of the adjusted cyan tone using the hsl() property.
+ testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi));
```
@@ -76,14 +81,52 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
Cooking with FCC!
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.russian.md
index 7a0fa6f2fa..4c8128e959 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.russian.md
@@ -2,23 +2,28 @@
id: 587d7791367417b2b2512ab4
title: Adjust the Width of an Element Using the width Property
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cvVLPtN
+forumTopicId: 301039
localeTitle: Настройка ширины элемента с помощью свойства width
---
## Description
- Вы можете указать ширину элемента, используя свойство width в CSS. Значения могут быть указаны в единицах относительной длины (например, em), единицах абсолютной длины (например, px) или в процентах от содержащего его родительского элемента. Вот пример, который задаёт ширину изображения равной 220 пикселям:
img { width: 220px; }
-
+
+Вы можете указать ширину элемента, используя свойство width в CSS. Значения могут быть указаны в единицах относительной длины (например, em), единицах абсолютной длины (например, px) или в процентах от содержащего его родительского элемента. Вот пример, который задаёт ширину изображения равной 220 пикселям:
img { width: 220px; }
+
+
## Instructions
- Добавьте свойство width ко всей карточке и установите абсолютное значение 245px. Используйте класс fullCard чтобы выбрать элемент.
+
+Добавьте свойство width ко всей карточке и установите абсолютное значение 245px. Используйте класс fullCard чтобы выбрать элемент.
+
## Tests
```yml
tests:
- - text: 'Ваш код должен изменить свойство width карточки на 245 пикселей, используя селектор класса fullCard .'
- testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the width property of the card to 245 pixels by using the fullCard class selector.");'
+ - text: Your code should change the width property of the card to 245 pixels by using the fullCard class selector.
+ testString: assert($('.fullCard').css('width') === '245px' && /\.fullCard{\S*width:245px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
```
@@ -69,14 +74,46 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Google
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.russian.md
index ad9eff26a8..b96390d876 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.russian.md
@@ -2,23 +2,28 @@
id: 587d78a8367417b2b2512ae5
title: Animate Elements at Variable Rates
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cZ89WA4
+forumTopicId: 301040
localeTitle: Анимационные элементы по переменным ценам
---
## Description
- Существует множество способов изменить скорость анимации похожих анимированных элементов. До сих пор это было достигнуто путем применения свойства animation-iteration-count и установки правил @keyframes . Чтобы проиллюстрировать, анимация справа состоит из двух «звезд», каждая из которых уменьшает размер и непрозрачность на 20% в правиле @keyframes , что создает анимацию мерцания. Вы можете изменить правило @keyframes для одного из элементов, чтобы звезды мерцали с разной скоростью.
+
+Существует множество способов изменить скорость анимации похожих анимированных элементов. До сих пор это было достигнуто путем применения свойства animation-iteration-count и установки правил @keyframes . Чтобы проиллюстрировать, анимация справа состоит из двух «звезд», каждая из которых уменьшает размер и непрозрачность на 20% в правиле @keyframes , что создает анимацию мерцания. Вы можете изменить правило @keyframes для одного из элементов, чтобы звезды мерцали с разной скоростью.
+
## Instructions
- Измените коэффициент анимации для элемента с именем класса star-1 , изменив его правило @keyframes на 50%.
+
+Измените коэффициент анимации для элемента с именем класса star-1 , изменив его правило @keyframes на 50%.
+
## Tests
```yml
tests:
- - text: Правило @keyframes для класса star-1 должно быть 50%.
- testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The @keyframes rule for the star-1 class should be 50%.");'
+ - text: The @keyframes rule for the star-1 class should be 50%.
+ testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g));
```
@@ -87,14 +92,63 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.russian.md
index 520c51f615..b7feb8a577 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.russian.md
@@ -2,23 +2,28 @@
id: 587d78a8367417b2b2512ae3
title: Animate Elements Continually Using an Infinite Animation Count
challengeType: 0
-videoUrl: ''
-localeTitle: 'Анимация элементов, постоянно использующих бесконечный подсчет анимации'
+videoUrl: https://scrimba.com/c/cVJDVfq
+forumTopicId: 301041
+localeTitle: Анимация элементов, постоянно использующих бесконечный подсчет анимации
---
## Description
- Предыдущие проблемы касались использования некоторых свойств анимации и правила @keyframes . Другим свойством анимации является animation-iteration-count , который позволяет вам контролировать, сколько раз вы хотели бы прокручивать анимацию. Вот пример: animation-iteration-count: 3; В этом случае анимация остановится после запуска 3 раза, но можно сделать анимацию непрерывной, установив это значение в бесконечное.
+
+Предыдущие проблемы касались использования некоторых свойств анимации и правила @keyframes . Другим свойством анимации является animation-iteration-count , который позволяет вам контролировать, сколько раз вы хотели бы прокручивать анимацию. Вот пример: animation-iteration-count: 3; В этом случае анимация остановится после запуска 3 раза, но можно сделать анимацию непрерывной, установив это значение в бесконечное.
+
## Instructions
- Чтобы держать мяч подпрыгивая справа в непрерывном цикле, измените свойство animation-iteration-count на бесконечность.
+
+Чтобы держать мяч подпрыгивая справа в непрерывном цикле, измените свойство animation-iteration-count на бесконечность.
+
## Tests
```yml
tests:
- - text: Свойство animation-iteration-count должно иметь значение бесконечное.
- testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The animation-iteration-count property should have a value of infinite.");'
+ - text: The animation-iteration-count property should have a value of infinite.
+ testString: assert($('#ball').css('animation-iteration-count') == 'infinite');
```
@@ -68,14 +73,44 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.russian.md
index 43d54c466e..d55f3da2f1 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.russian.md
@@ -2,27 +2,32 @@
id: 587d78a8367417b2b2512ae6
title: Animate Multiple Elements at Variable Rates
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cnpWZc9
+forumTopicId: 301042
localeTitle: Анимация нескольких элементов при переменных значениях
---
## Description
- В предыдущей задаче вы изменили скорость анимации для двух одинаково анимированных элементов, изменив их правила @keyframes . Вы можете достичь той же цели, манипулируя animation-duration нескольких элементов. В анимации, запущенной в редакторе кода, в небе есть три «звезды», которые мерцают с одинаковой скоростью в непрерывном цикле. Чтобы заставить их мерцать с разной скоростью, вы можете установить для свойства animation-duration для разных значений для каждого элемента.
+
+В предыдущей задаче вы изменили скорость анимации для двух одинаково анимированных элементов, изменив их правила @keyframes . Вы можете достичь той же цели, манипулируя animation-duration нескольких элементов. В анимации, запущенной в редакторе кода, в небе есть три «звезды», которые мерцают с одинаковой скоростью в непрерывном цикле. Чтобы заставить их мерцать с разной скоростью, вы можете установить для свойства animation-duration для разных значений для каждого элемента.
+
## Instructions
- Установите animation-duration элементов с классами star-1 , star-2 и star-3 на 1s, 0.9s и 1.1s соответственно.
+
+Установите animation-duration элементов с классами star-1 , star-2 и star-3 на 1s, 0.9s и 1.1s соответственно.
+
## Tests
```yml
tests:
- - text: Свойство animation-duration для звезды с классом star-1 должно оставаться на уровне 1 с.
- testString: 'assert($(".star-1").css("animation-duration") == "1s", "The animation-duration property for the star with class star-1 should remain at 1s.");'
- - text: 'Свойство animation-duration для звезды с классом star-2 должно быть 0,9 с.'
- testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The animation-duration property for the star with class star-2 should be 0.9s.");'
- - text: 'Свойство animation-duration для звезды с классом star-3 должно быть 1,1 с.'
- testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The animation-duration property for the star with class star-3 should be 1.1s.");'
+ - text: The animation-duration property for the star with class star-1 should remain at 1s.
+ testString: assert($('.star-1').css('animation-duration') == '1s');
+ - text: The animation-duration property for the star with class star-2 should be 0.9s.
+ testString: assert($('.star-2').css('animation-duration') == '0.9s');
+ - text: The animation-duration property for the star with class star-3 should be 1.1s.
+ testString: assert($('.star-3').css('animation-duration') == '1.1s');
```
@@ -92,14 +97,64 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.russian.md
index 76acd2cb46..421a7371e2 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.russian.md
@@ -2,23 +2,28 @@
id: 587d78a3367417b2b2512ad0
title: Center an Element Horizontally Using the margin Property
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cyLJqU4
+forumTopicId: 301043
localeTitle: Центрировать элемент горизонтально Использование поля Свойства
---
## Description
- Другой метод позиционирования - центрировать элемент блока горизонтально. Один из способов сделать это - установить margin в значение auto. Этот метод работает и для изображений. Изображения являются встроенными элементами по умолчанию, но могут быть изменены на блокирующие элементы, когда вы устанавливаете свойство display для блокировки.
+
+Другой метод позиционирования - центрировать элемент блока горизонтально. Один из способов сделать это - установить margin в значение auto. Этот метод работает и для изображений. Изображения являются встроенными элементами по умолчанию, но могут быть изменены на блокирующие элементы, когда вы устанавливаете свойство display для блокировки.
+
## Instructions
-div на странице, добавив свойство margin со значением auto.
+
+div на странице, добавив свойство margin со значением auto.
+
## Tests
```yml
tests:
- - text: У div должен быть установлен margin в auto.
- testString: 'assert(code.match(/margin:\s*?auto;/g), "The div should have a margin set to auto.");'
+ - text: The div should have a margin set to auto.
+ testString: assert(code.match(/margin:\s*?auto;/g));
```
@@ -44,14 +49,21 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.russian.md
index 6a02d35007..89c16f67a5 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.russian.md
@@ -2,25 +2,30 @@
id: 587d781e367417b2b2512ac9
title: Change an Element's Relative Position
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/czVmMtZ
+forumTopicId: 301044
localeTitle: Изменение относительного положения элемента
---
## Description
- CSS обрабатывает каждый элемент HTML как свой собственный ящик, который обычно называют CSS Box Model . Элементы уровня блока автоматически начинаются с новой строки (считайте заголовки, абзацы и div), в то время как встроенные элементы располагаются внутри окружающего содержимого (например, изображения или промежутки). Стандартная компоновка элементов таким образом называется normal flow документа, но CSS предлагает свойство position, чтобы переопределить его. Когда позиция элемента установлена на relative , она позволяет указать, как CSS должен перемещать ее относительно текущей позиции в обычном потоке страницы. Он соединяется со свойствами смещения CSS left или right , а top или bottom . Они говорят , сколько пикселей, проценты, или Эмс , чтобы переместить элемент от места , где она обычно располагается. В следующем примере перемещение абзаца 10 пикселей снизу:
п { позиция: относительная; снизу: 10 пикселей; }
Изменение положения элемента относительно относительного не удаляет его из обычного потока - другие элементы вокруг него все еще ведут себя так, как если бы этот элемент находился в позиции по умолчанию. Заметка Позиционирование дает вам большую гибкость и силу над визуальным расположением страницы. Приятно помнить, что независимо от положения элементов базовая разметка HTML должна быть организована и иметь смысл при чтении сверху вниз. Это то, как пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как устройства чтения с экрана) получают доступ к вашему контенту.
+
+CSS обрабатывает каждый элемент HTML как свой собственный ящик, который обычно называют CSS Box Model . Элементы уровня блока автоматически начинаются с новой строки (считайте заголовки, абзацы и div), в то время как встроенные элементы располагаются внутри окружающего содержимого (например, изображения или промежутки). Стандартная компоновка элементов таким образом называется normal flow документа, но CSS предлагает свойство position, чтобы переопределить его. Когда позиция элемента установлена на relative , она позволяет указать, как CSS должен перемещать ее относительно текущей позиции в обычном потоке страницы. Он соединяется со свойствами смещения CSS left или right , а top или bottom . Они говорят , сколько пикселей, проценты, или Эмс , чтобы переместить элемент от места , где она обычно располагается. В следующем примере перемещение абзаца 10 пикселей снизу:
п { позиция: относительная; снизу: 10 пикселей; }
Изменение положения элемента относительно относительного не удаляет его из обычного потока - другие элементы вокруг него все еще ведут себя так, как если бы этот элемент находился в позиции по умолчанию. Заметка Позиционирование дает вам большую гибкость и силу над визуальным расположением страницы. Приятно помнить, что независимо от положения элементов базовая разметка HTML должна быть организована и иметь смысл при чтении сверху вниз. Это то, как пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как устройства чтения с экрана) получают доступ к вашему контенту.
+
## Instructions
- Измените positionh2 на relative и используйте смещение CSS, чтобы переместить его на 15 пикселей от top где он находится в нормальном потоке. Обратите внимание, что нет никакого влияния на позиции окружающих элементов h1 и p.
+
+Измените positionh2 на relative и используйте смещение CSS, чтобы переместить его на 15 пикселей от top где он находится в нормальном потоке. Обратите внимание, что нет никакого влияния на позиции окружающих элементов h1 и p.
+
## Tests
```yml
tests:
- - text: Элемент h2 должен иметь свойство position заданное relative .
- testString: 'assert($("h2").css("position") == "relative", "The h2 element should have a position property set to relative.");'
- - text: Ваш код должен использовать смещение CSS для относительно позиционирования h2 15px от top где он обычно сидит.
- testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.");'
+ - text: The h2 element should have a position property set to relative.
+ testString: assert($('h2').css('position') == 'relative');
+ - text: Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.
+ testString: assert($('h2').css('top') == '15px');
```
@@ -48,14 +53,23 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
On Being Well-Positioned
+
Move me!
+
I still think the h2 is where it normally sits.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.russian.md
index 9204e6b833..36a97c81ba 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.russian.md
@@ -2,25 +2,30 @@
id: 587d78a8367417b2b2512ae7
title: Change Animation Timing with Keywords
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cJKvwCM
+forumTopicId: 301045
localeTitle: Изменение времени анимации с помощью ключевых слов
---
## Description
- В анимации CSS свойство animation-timing-function определяет, как быстро изменяется анимированный элемент во время анимации. Если анимация - это автомобиль, перемещающийся из точки A в точку B в заданное время (продолжительность animation-duration ), animation-timing-function говорит о том, как автомобиль ускоряется и замедляется в ходе движения. Для популярных опций есть несколько предопределенных ключевых слов. Например, значение по умолчанию - это ease , которая начинается медленно, ускоряется в середине, а затем в конце замедляется. Другие варианты включают ease-out , которое быстро начинается, а затем замедляется, ease-in , что медленно начинается, а затем ускоряется в конце или linear , что накладывает постоянную скорость анимации.
+
+В анимации CSS свойство animation-timing-function определяет, как быстро изменяется анимированный элемент во время анимации. Если анимация - это автомобиль, перемещающийся из точки A в точку B в заданное время (продолжительность animation-duration ), animation-timing-function говорит о том, как автомобиль ускоряется и замедляется в ходе движения. Для популярных опций есть несколько предопределенных ключевых слов. Например, значение по умолчанию - это ease , которая начинается медленно, ускоряется в середине, а затем в конце замедляется. Другие варианты включают ease-out , которое быстро начинается, а затем замедляется, ease-in , что медленно начинается, а затем ускоряется в конце или linear , что накладывает постоянную скорость анимации.
+
## Instructions
-undefined
+
+For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the animation-timing-function property for the element with the id ball1 should be linear.");'
- - text: ''
- testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id ball2 should be ease-out.");'
+ - text: The value of the animation-timing-function property for the element with the id ball1 should be linear.
+ testString: assert($('#ball1').css('animation-timing-function') == 'linear');
+ - text: The value of the animation-timing-function property for the element with the id ball2 should be ease-out.
+ testString: assert($('#ball2').css('animation-timing-function') == 'ease-out');
```
@@ -58,14 +63,14 @@ tests:
}
-@keyframes bounce {
- 0% {
- top: 0px;
+ @keyframes bounce {
+ 0% {
+ top: 0px;
+ }
+ 100% {
+ top: 249px;
+ }
}
- 100% {
- top: 249px;
- }
-}
@@ -76,14 +81,48 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.russian.md
index 6273faf3df..0a3e0ea1a7 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.russian.md
@@ -2,23 +2,28 @@
id: 587d78a3367417b2b2512acf
title: Change the Position of Overlapping Elements with the z-index Property
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cM94aHk
+forumTopicId: 301046
localeTitle: Изменение позиции перекрывающихся элементов с помощью свойства z-index
---
## Description
- Когда элементы расположены для перекрытия, элемент, следующий позже в разметке HTML, по умолчанию будет отображаться поверх других элементов. Однако свойство z-index может указывать порядок расположения элементов друг над другом. Он должен быть целым числом (то есть целым числом, а не десятичным), а более высокие значения для свойства z-index элемента перемещают его выше в стеке, чем те, у которых более низкие значения.
+
+Когда элементы расположены для перекрытия, элемент, следующий позже в разметке HTML, по умолчанию будет отображаться поверх других элементов. Однако свойство z-index может указывать порядок расположения элементов друг над другом. Он должен быть целым числом (то есть целым числом, а не десятичным), а более высокие значения для свойства z-index элемента перемещают его выше в стеке, чем те, у которых более низкие значения.
+
## Instructions
- Добавьте свойство z-index к элементу с именем класса first (красный прямоугольник) и установите для него значение 2, чтобы он покрывал другой элемент (синий прямоугольник).
+
+Добавьте свойство z-index к элементу с именем класса first (красный прямоугольник) и установите для него значение 2, чтобы он покрывал другой элемент (синий прямоугольник).
+
## Tests
```yml
tests:
- - text: Элемент с классом first должен иметь значение z-index 2.
- testString: 'assert($(".first").css("z-index") == "2", "The element with class first should have a z-index value of 2.");'
+ - text: The element with class first should have a z-index value of 2.
+ testString: assert($('.first').css('z-index') == '2');
```
@@ -58,14 +63,34 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.russian.md
index c6f5c5d09d..bcca2ad375 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.russian.md
@@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ad6
title: Create a Gradual CSS Linear Gradient
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cg4dpt9
+forumTopicId: 301047
localeTitle: Создать линейный градиент линейного CSS
---
## Description
- Применение цвета на элементах HTML не ограничивается одним плоским оттенком. CSS обеспечивает возможность использования цветовых переходов, иначе называемых градиентами, на элементах. Доступ к нему осуществляется через background отеля linear-gradient() функции. Вот общий синтаксис: background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); Первый аргумент указывает направление, с которого начинается переход цвета - его можно указать как градус, где 90deg делает вертикальный градиент, а 45deg - угловым, как обратная косая черта. Следующие аргументы определяют порядок цветов, используемых в градиенте. Пример: background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
+
+Применение цвета на элементах HTML не ограничивается одним плоским оттенком. CSS обеспечивает возможность использования цветовых переходов, иначе называемых градиентами, на элементах. Доступ к нему осуществляется через background отеля linear-gradient() функции. Вот общий синтаксис: background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); Первый аргумент указывает направление, с которого начинается переход цвета - его можно указать как градус, где 90deg делает вертикальный градиент, а 45deg - угловым, как обратная косая черта. Следующие аргументы определяют порядок цветов, используемых в градиенте. Пример: background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
+
## Instructions
- Используйте linear-gradient() для background элемента div и установите его в направлении 35 градусов, чтобы изменить цвет с #CCFFFF на #FFCCCC . Заметка Хотя есть другие способы указать значение цвета, например rgb() или hsl() , используйте шестнадцатеричные значения для этой задачи.
+
+Используйте linear-gradient() для background элемента div и установите его в направлении 35 градусов, чтобы изменить цвет с #CCFFFF на #FFCCCC . Заметка Хотя есть другие способы указать значение цвета, например rgb() или hsl() , используйте шестнадцатеричные значения для этой задачи.
+
## Tests
```yml
tests:
- - text: Элемент div должен иметь background с linear-gradient с заданным направлением и цветами.
- testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The div element should have a linear-gradientbackground with the specified direction and colors.");'
+ - text: The div element should have a linear-gradientbackground with the specified direction and colors.
+ testString: assert($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi));
```
@@ -31,8 +36,7 @@ tests:
```html
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.russian.md
index 9c796b24f3..cc66da8a54 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.russian.md
@@ -2,27 +2,32 @@
id: 587d78a6367417b2b2512add
title: Create a Graphic Using CSS
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cEDWPs6
+forumTopicId: 301048
localeTitle: Создать графику с помощью CSS
---
## Description
- Управляя различными селекторами и свойствами, вы можете создавать интересные фигуры. Один из самых простых способов - полумесяц. Для этой задачи вам нужно работать с свойством box-shadow которое задает тень элемента, а также свойство border-radius которое контролирует округлость углов элемента. Вы создадите круглый прозрачный объект с хрустящей тень, слегка смещенной в сторону - тень на самом деле будет формой луны, которую вы видите. Чтобы создать круглый объект, свойство border-radius должно быть установлено равным 50%. Вы можете вспомнить более раннюю задачу о том, что свойство box-shadow принимает значения для offset-x , offset-y , blur-radius , spread-radius и значение цвета в этом порядке. Значения blur-radiusspread-radius необязательны.
+
+Управляя различными селекторами и свойствами, вы можете создавать интересные фигуры. Один из самых простых способов - полумесяц. Для этой задачи вам нужно работать с свойством box-shadow которое задает тень элемента, а также свойство border-radius которое контролирует округлость углов элемента. Вы создадите круглый прозрачный объект с хрустящей тень, слегка смещенной в сторону - тень на самом деле будет формой луны, которую вы видите. Чтобы создать круглый объект, свойство border-radius должно быть установлено равным 50%. Вы можете вспомнить более раннюю задачу о том, что свойство box-shadow принимает значения для offset-x , offset-y , blur-radius , spread-radius и значение цвета в этом порядке. Значения blur-radiusspread-radius необязательны.
+
## Instructions
- Манипулируйте квадратный элемент в редакторе, чтобы создать форму луны. Сначала измените background-color на прозрачный, затем установите для свойства border-radius значение 50%, чтобы сделать круглую форму. Наконец, измените свойство box-shadow чтобы установить offset-x в 25px, offset-y до 10px, blur-radius до 0, spread-radius до 0 и цвет в синий.
+
+Манипулируйте квадратный элемент в редакторе, чтобы создать форму луны. Сначала измените background-color на прозрачный, затем установите для свойства border-radius значение 50%, чтобы сделать круглую форму. Наконец, измените свойство box-shadow чтобы установить offset-x в 25px, offset-y до 10px, blur-radius до 0, spread-radius до 0 и цвет в синий.
+
## Tests
```yml
tests:
- - text: Значение свойства background-color должно быть установлено на transparent .
- testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the background-color property should be set to transparent.");'
- - text: Значение свойства border-radius должно быть установлено на 50% .
- testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the border-radius property should be set to 50%.");'
- - text: 'Значение свойства box-shadow должно быть установлено равным 25px для offset-x , 10px для offset-y , 0 для blur-radius , 0 для spread-radius и, наконец, синего цвета.'
- testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color.");'
+ - text: The value of the background-color property should be set to transparent.
+ testString: assert(code.match(/background-color:\s*?transparent;/gi));
+ - text: The value of the border-radius property should be set to 50%.
+ testString: assert(code.match(/border-radius:\s*?50%;/gi));
+ - text: The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color.
+ testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi));
```
@@ -35,20 +40,19 @@ tests:
```html
@@ -57,14 +61,28 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.russian.md
index 7bb10afdbc..0196bcccd0 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.russian.md
@@ -2,25 +2,30 @@
id: 587d781b367417b2b2512abb
title: Create a Horizontal Line Using the hr Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c3bR8t7
+forumTopicId: 301049
localeTitle: Создание горизонтальной линии с использованием элемента hr
---
## Description
- Вы можете использовать тег hr чтобы добавить горизонтальную линию по ширине содержащего ее элемента. Это можно использовать для определения изменения темы или для визуального разделения групп контента.
+
+Вы можете использовать тег hr чтобы добавить горизонтальную линию по ширине содержащего ее элемента. Это можно использовать для определения изменения темы или для визуального разделения групп контента.
+
## Instructions
- Добавьте hr тег под h4 который содержит название карты. Заметка В HTML hr является самозакрывающимся тегом и поэтому не требует отдельного закрывающего тега.
+
+Добавьте hr тег под h4 который содержит название карты. Заметка В HTML hr является самозакрывающимся тегом и поэтому не требует отдельного закрывающего тега.
+
## Tests
```yml
tests:
- - text: Ваш код должен добавить метку hr к разметке.
- testString: 'assert($("hr").length == 1, "Your code should add an hr tag to the markup.");'
- - text: Тег hr должен находиться между заголовком и абзацем.
- testString: 'assert(code.match(/<\/h4>\s*?|\s*?\/>)\s*?
/gi), "The hr tag should come between the title and the paragraph.");'
+ - text: Your code should add an hr tag to the markup.
+ testString: assert($('hr').length == 1);
+ - text: The hr tag should come between the title and the paragraph.
+ testString: assert(code.match(/<\/h4>\s*?|\s*?\/>)\s*?
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.russian.md
index a0fcf861a8..d722a63c49 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.russian.md
@@ -2,29 +2,34 @@
id: 587d78a6367417b2b2512ade
title: Create a More Complex Shape Using CSS and HTML
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cPpz4fr
+forumTopicId: 301050
localeTitle: Создание более сложной формы с использованием CSS и HTML
---
## Description
- Одна из самых популярных фигур в мире - это форма сердца, и в этой задаче вы создадите один, используя чистый CSS. Но сначала вам нужно понять псевдо-элементы ::before и ::after . Эти псевдоэлементы используются для добавления чего-либо до или после выбранного элемента. В следующем примере под ::before a ::before используется для добавления прямоугольника к элементу с heart класса:
Чтобы функции ::before и ::after псевдоэлементов функционировали должным образом, они должны иметь определенное свойство content . Это свойство обычно используется для добавления к выбранному элементу таких вещей, как фотография или текст. Когда для создания фигур используются элементы ::before и ::after псевдоэлементов, свойство content по-прежнему требуется, но оно установлено в пустую строку. В приведенном выше примере элемент с классом heart имеет ::before псевдоэлементом, который создает желтый прямоугольник с height и width 50 пикселей и 70 пикселей соответственно. Этот прямоугольник имеет круглые углы из-за его 25-процентного пограничного радиуса и расположен абсолютно в 5px left и 50px над top частью элемента.
+
+Одна из самых популярных фигур в мире - это форма сердца, и в этой задаче вы создадите один, используя чистый CSS. Но сначала вам нужно понять псевдо-элементы ::before и ::after . Эти псевдоэлементы используются для добавления чего-либо до или после выбранного элемента. В следующем примере под ::before a ::before используется для добавления прямоугольника к элементу с heart класса:
Чтобы функции ::before и ::after псевдоэлементов функционировали должным образом, они должны иметь определенное свойство content . Это свойство обычно используется для добавления к выбранному элементу таких вещей, как фотография или текст. Когда для создания фигур используются элементы ::before и ::after псевдоэлементов, свойство content по-прежнему требуется, но оно установлено в пустую строку. В приведенном выше примере элемент с классом heart имеет ::before псевдоэлементом, который создает желтый прямоугольник с height и width 50 пикселей и 70 пикселей соответственно. Этот прямоугольник имеет круглые углы из-за его 25-процентного пограничного радиуса и расположен абсолютно в 5px left и 50px над top частью элемента.
+
## Instructions
- Преобразуйте элемент на экране в сердце. В heart::after селектора измените background-color на розовый и border-radius до 50%. Затем задайте элемент с heart класса (просто heart ) и заполните свойство transform . Используйте функцию rotate() с -45 градусов. ( rotate() работает так же, как skewX() и skewY() do). Наконец, в heart::before селектором установите его свойство content в пустую строку.
+
+Преобразуйте элемент на экране в сердце. В heart::after селектора измените background-color на розовый и border-radius до 50%. Затем задайте элемент с heart класса (просто heart ) и заполните свойство transform . Используйте функцию rotate() с -45 градусов. ( rotate() работает так же, как skewX() и skewY() do). Наконец, в heart::before селектором установите его свойство content в пустую строку.
+
## Tests
```yml
tests:
- - text: 'Свойство background-color для heart::after селектора должно быть розовым.'
- testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The background-color property of the heart::after selector should be pink.");'
- - text: ''
- testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The border-radius of the heart::after selector should be 50%.");'
- - text: Свойство transform для класса heart должно использовать функцию rotate() установленную на -45 градусов.
- testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The transform property for the heart class should use a rotate() function set to -45 degrees.");'
- - text: 'contentheart::before селектором должна быть пустая строка.'
- testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The content of the heart::before selector should be an empty string.");'
+ - text: The background-color property of the heart::after selector should be pink.
+ testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi));
+ - text: The border-radius of the heart::after selector should be 50%.
+ testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
+ - text: The transform property for the heart class should use a rotate() function set to -45 degrees.
+ testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
+ - text: The content of the heart::before selector should be an empty string.
+ testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
```
@@ -37,53 +42,86 @@ tests:
```html
-
+
```
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.russian.md
index b7dd2f40a0..13a13d3636 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.russian.md
@@ -2,27 +2,32 @@
id: 587d78a7367417b2b2512ae1
title: Create Movement Using CSS Animation
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c7amZfW
+forumTopicId: 301051
localeTitle: Создание движения с использованием анимации CSS
---
## Description
- Когда элементы имеют заданную position , например fixed или relative , свойства смещения CSS right , left , top и bottom могут использоваться в правилах анимации для создания движения. Как показано в приведенном ниже примере, вы можете нажать элемент вниз, а затем вверх, установив top свойство 50% ключевого кадра на 50% пикселей, но установив его на 0px для первого ( 0% ) и последнего ( 100% ) ключевого кадра.
+
+Когда элементы имеют заданную position , например fixed или relative , свойства смещения CSS right , left , top и bottom могут использоваться в правилах анимации для создания движения. Как показано в приведенном ниже примере, вы можете нажать элемент вниз, а затем вверх, установив top свойство 50% ключевого кадра на 50% пикселей, но установив его на 0px для первого ( 0% ) и последнего ( 100% ) ключевого кадра.
+
## Instructions
- Добавьте горизонтальное движение в анимацию div . Используя свойство left offset, добавьте правило @keyframes так что радуга начинается с 0 пикселей на 0% , перемещается до 25 пикселей с 50% и заканчивается на -25 пикселей при 100% . Не заменяйте top свойство в редакторе - анимация должна иметь как вертикальное, так и горизонтальное движение.
+
+Добавьте горизонтальное движение в анимацию div . Используя свойство left offset, добавьте правило @keyframes так что радуга начинается с 0 пикселей на 0% , перемещается до 25 пикселей с 50% и заканчивается на -25 пикселей при 100% . Не заменяйте top свойство в редакторе - анимация должна иметь как вертикальное, так и горизонтальное движение.
+
## Tests
```yml
tests:
- - text: Правило @keyframes для 0% должно использовать left смещение 0px.
- testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The @keyframes rule for 0% should use the left offset of 0px.");'
- - text: Правило @keyframes для 50% должно использовать left смещение 25px.
- testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The @keyframes rule for 50% should use the left offset of 25px.");'
- - text: Правило @keyframes для 100% должно использовать left смещение -25px.
- testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The @keyframes rule for 100% should use the left offset of -25px.");'
+ - text: The @keyframes rule for 0% should use the left offset of 0px.
+ testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi));
+ - text: The @keyframes rule for 50% should use the left offset of 25px.
+ testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi));
+ - text: The @keyframes rule for 100% should use the left offset of -25px.
+ testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi));
```
@@ -44,28 +49,28 @@ tests:
position: relative;
}
-#rect {
- animation-name: rainbow;
- animation-duration: 4s;
-}
-
-@keyframes rainbow {
- 0% {
- background-color: blue;
- top: 0px;
-
+ #rect {
+ animation-name: rainbow;
+ animation-duration: 4s;
}
- 50% {
- background-color: green;
- top: 50px;
- }
- 100% {
- background-color: yellow;
- top: 0px;
+ @keyframes rainbow {
+ 0% {
+ background-color: blue;
+ top: 0px;
+ }
+ 50% {
+ background-color: green;
+ top: 50px;
+
+ }
+ 100% {
+ background-color: yellow;
+ top: 0px;
+
+ }
}
-}
@@ -74,14 +79,46 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.russian.md
index ec611b0af7..fb4c0d82b5 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.russian.md
@@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ad8
title: Create Texture by Adding a Subtle Pattern as a Background Image
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cQdwJC8
+forumTopicId: 301052
localeTitle: Создание текстуры путем добавления тонкого шаблона в качестве фонового изображения
---
## Description
- Один из способов добавить текстуру и интерес к фону и подчеркнуть ее - добавить тонкий узор. Ключом является баланс, так как вы не хотите, чтобы фон выделялся слишком много, и убирайте с переднего плана. Свойство background поддерживает функцию url() , чтобы ссылаться на изображение выбранной текстуры или рисунка. Адрес ссылки заключен в кавычки внутри круглых скобок.
+
+Один из способов добавить текстуру и интерес к фону и подчеркнуть ее - добавить тонкий узор. Ключом является баланс, так как вы не хотите, чтобы фон выделялся слишком много, и убирайте с переднего плана. Свойство background поддерживает функцию url() , чтобы ссылаться на изображение выбранной текстуры или рисунка. Адрес ссылки заключен в кавычки внутри круглых скобок.
+
## Instructions
- Использование URL в https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png , установить background всей страницы с body селектором.
+
+Использование URL в https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png , установить background всей страницы с body селектором.
+
## Tests
```yml
tests:
- - text: Элемент вашего body должен иметь свойство background установленное в url() с указанной ссылкой.
- testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi), "Your body element should have a background property set to a url() with the given link.");'
+ - text: Your body element should have a background property set to a url() with the given link.
+ testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));
```
@@ -40,14 +45,17 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.russian.md
index a043d3715b..bb58f8ccac 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.russian.md
@@ -2,25 +2,30 @@
id: 587d7791367417b2b2512ab3
title: Create Visual Balance Using the text-align Property
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c3b4EAp
+forumTopicId: 301053
localeTitle: Создание визуального баланса Использование свойства text-align
---
## Description
- Этот раздел учебной программы посвящен прикладному визуальному дизайну. Первая группа задач основывается на данном макете карты, чтобы показать ряд основных принципов. Текст часто является большой частью веб-контента. CSS имеет несколько вариантов выравнивания его с свойством text-align . text-align: justify; вызывает все строки текста, кроме последней строки, для соответствия левому и правому краям строки строки. text-align: center; центрирует текст text-align: right; выравнивание по правому краю текста и text-align: left; (по умолчанию) выравнивает текст по левому краю.
+
+Этот раздел учебной программы посвящен прикладному визуальному дизайну. Первая группа задач основывается на данном макете карты, чтобы показать ряд основных принципов. Текст часто является большой частью веб-контента. CSS имеет несколько вариантов выравнивания его с свойством text-align . text-align: justify; вызывает все строки текста, кроме последней строки, для соответствия левому и правому краям строки строки. text-align: center; центрирует текст text-align: right; выравнивание по правому краю текста и text-align: left; (по умолчанию) выравнивает текст по левому краю.
+
## Instructions
- Совместите текст тега h4 , в котором говорится «Google», в центр. Затем оправдайте тег абзаца, который содержит информацию о том, как Google был основан.
+
+Совместите текст тега h4 , в котором говорится «Google», в центр. Затем оправдайте тег абзаца, который содержит информацию о том, как Google был основан.
+
## Tests
```yml
tests:
- - text: Ваш код должен использовать свойство text-align для тега h4 чтобы установить его в центр.
- testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the h4 tag to set it to center.");'
- - text: Ваш код должен использовать свойство text-align на тэге p чтобы установить его для оправдания.
- testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the p tag to set it to justify.");'
+ - text: Your code should use the text-align property on the h4 tag to set it to center.
+ testString: assert($('h4').css('text-align') == 'center');
+ - text: Your code should use the text-align property on the p tag to set it to justify.
+ testString: assert($('p').css('text-align') == 'justify');
```
@@ -70,14 +75,45 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Google
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.russian.md
index ba7fb2669f..ccd96eda53 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.russian.md
@@ -2,23 +2,28 @@
id: 587d78a7367417b2b2512ae2
title: Create Visual Direction by Fading an Element from Left to Right
challengeType: 0
-videoUrl: ''
-localeTitle: 'Создать визуальное направление, затухая элемент слева направо'
+videoUrl: https://scrimba.com/c/cGJqqAE
+forumTopicId: 301054
+localeTitle: Создать визуальное направление, затухая элемент слева направо
---
## Description
- Для этой задачи вы измените opacity анимированного элемента, чтобы он постепенно исчезал, когда он достиг правой стороны экрана. В отображаемой анимации круглый элемент с фоном градиента перемещается вправо на 50% метки анимации по правилу @keyframes .
+
+Для этой задачи вы измените opacity анимированного элемента, чтобы он постепенно исчезал, когда он достиг правой стороны экрана. В отображаемой анимации круглый элемент с фоном градиента перемещается вправо на 50% метки анимации по правилу @keyframes .
+
## Instructions
- Задайте элемент с идентификатором ball и добавьте свойство opacity равное 0.1, равное 50% , поэтому элемент исчезает, когда он перемещается вправо.
+
+Задайте элемент с идентификатором ball и добавьте свойство opacity равное 0.1, равное 50% , поэтому элемент исчезает, когда он перемещается вправо.
+
## Tests
```yml
tests:
- - text: 'Правило keyframes для fade должно установить свойство opacity 0,1 на 50%.'
- testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), "The keyframes rule for fade should set the opacity property to 0.1 at 50%.");'
+ - text: The keyframes rule for fade should set the opacity property to 0.1 at 50%.
+ testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi));
```
@@ -63,14 +68,37 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.russian.md
index 3cd351df30..978c59a66d 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.russian.md
@@ -2,23 +2,28 @@
id: 587d781c367417b2b2512abf
title: Decrease the Opacity of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c7aKqu4
+forumTopicId: 301055
localeTitle: Уменьшить непрозрачность элемента
---
## Description
- Свойство opacity в CSS используется для настройки непрозрачности или, наоборот, прозрачности для элемента.
Значение 1 непрозрачно, что совсем не прозрачно. Значение 0,5 равно половине видимости. Значение 0 полностью прозрачно.
Приведенное значение будет применяться ко всему элементу, будь то изображение с некоторой прозрачностью или цвета переднего плана и фона для блока текста.
+
+Свойство opacity в CSS используется для настройки непрозрачности или, наоборот, прозрачности для элемента.
Значение 1 непрозрачно, что совсем не прозрачно. Значение 0,5 равно половине видимости. Значение 0 полностью прозрачно.
Приведенное значение будет применяться ко всему элементу, будь то изображение с некоторой прозрачностью или цвета переднего плана и фона для блока текста.
+
## Instructions
- Установите opacity тегов привязки на 0.7, используя класс links чтобы выбрать их.
+
+Установите opacity тегов привязки на 0.7, используя класс links чтобы выбрать их.
+
## Tests
```yml
tests:
- - text: 'Ваш код должен установить свойство opacity 0,7 в тегах привязки, выбрав класс links .'
- testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.");'
+ - text: Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.
+ testString: assert(/\.links\s*\{[^}]+opacity\s*:\s*0.7;/.test(code));
```
@@ -80,14 +85,57 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Alphabet
+
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.russian.md
index 32bec7701d..90bd0c545c 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.russian.md
@@ -2,25 +2,30 @@
id: 587d78a3367417b2b2512ad1
title: Learn about Complementary Colors
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c2MD3Tr
+forumTopicId: 301056
localeTitle: Узнайте о дополнительных цветах
---
## Description
- Теория цвета и его влияние на дизайн являются глубокой темой, и только основные вопросы рассматриваются в следующих задачах. На веб-сайте цвет может привлекать внимание к контенту, вызывать эмоции или создавать визуальную гармонию. Использование различных комбинаций цветов может действительно изменить внешний вид веб-сайта, и многие мысли могут пойти на подбор цветовой палитры, которая работает с вашим контентом. Цветовое колесо - полезный инструмент для визуализации того, как соотносятся цвета друг с другом - это круг, где похожие оттенки соседствуют, а разные оттенки находятся дальше друг от друга. Когда два цвета противоположны друг другу на колесе, их называют дополнительными цветами. У них есть характеристика, что если они объединены, они «отменяют» друг друга и создают серый цвет. Однако при размещении бок о бок эти цвета выглядят более яркими и создают сильный визуальный контраст. Некоторые примеры дополнительных цветов с шестнадцатеричными кодами:
красный (# FF0000) и голубой (# 00FFFF) зеленый (# 00FF00) и пурпурный (# FF00FF) синий (# 0000FF) и желтый (# FFFF00)
Это отличается от устаревшей цветовой модели RYB, которую многие из нас преподавали в школе, которая имеет разные первичные и дополнительные цвета. Современная теория цвета использует аддитивную модель RGB (например, на экране компьютера) и субтрактивную модель CMY (K) (например, в печати). Читайте здесь для получения дополнительной информации об этом сложном предмете. В Интернете доступно множество инструментов для выбора цветов, которые могут найти дополнение к цвету. Заметка Для всех цветовых задач: использование цвета может стать мощным способом добавить визуальный интерес к странице. Тем не менее, только цвет не должен использоваться как единственный способ передачи важной информации, поскольку пользователи с нарушениями зрения могут не понимать этот контент. Эта проблема будет рассмотрена более подробно в задачах прикладной доступности.
+
+Теория цвета и его влияние на дизайн являются глубокой темой, и только основные вопросы рассматриваются в следующих задачах. На веб-сайте цвет может привлекать внимание к контенту, вызывать эмоции или создавать визуальную гармонию. Использование различных комбинаций цветов может действительно изменить внешний вид веб-сайта, и многие мысли могут пойти на подбор цветовой палитры, которая работает с вашим контентом. Цветовое колесо - полезный инструмент для визуализации того, как соотносятся цвета друг с другом - это круг, где похожие оттенки соседствуют, а разные оттенки находятся дальше друг от друга. Когда два цвета противоположны друг другу на колесе, их называют дополнительными цветами. У них есть характеристика, что если они объединены, они «отменяют» друг друга и создают серый цвет. Однако при размещении бок о бок эти цвета выглядят более яркими и создают сильный визуальный контраст. Некоторые примеры дополнительных цветов с шестнадцатеричными кодами:
красный (# FF0000) и голубой (# 00FFFF) зеленый (# 00FF00) и пурпурный (# FF00FF) синий (# 0000FF) и желтый (# FFFF00)
Это отличается от устаревшей цветовой модели RYB, которую многие из нас преподавали в школе, которая имеет разные первичные и дополнительные цвета. Современная теория цвета использует аддитивную модель RGB (например, на экране компьютера) и субтрактивную модель CMY (K) (например, в печати). Читайте здесь для получения дополнительной информации об этом сложном предмете. В Интернете доступно множество инструментов для выбора цветов, которые могут найти дополнение к цвету. Заметка Для всех цветовых задач: использование цвета может стать мощным способом добавить визуальный интерес к странице. Тем не менее, только цвет не должен использоваться как единственный способ передачи важной информации, поскольку пользователи с нарушениями зрения могут не понимать этот контент. Эта проблема будет рассмотрена более подробно в задачах прикладной доступности.
+
## Instructions
- Измените свойство background-colorblue и yellow классов на соответствующие цвета. Обратите внимание, как цвета выглядят по-разному рядом друг с другом, чем они сравниваются с белым фоном.
+
+Измените свойство background-colorblue и yellow классов на соответствующие цвета. Обратите внимание, как цвета выглядят по-разному рядом друг с другом, чем они сравниваются с белым фоном.
+
## Tests
```yml
tests:
- - text: Элемент div с blue должен иметь синий background-color .
- testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The div element with class blue should have a background-color of blue.");'
- - text: Элемент div с yellow классом должен иметь желтый background-color .
- testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The div element with class yellow should have a background-color of yellow.");'
+ - text: The div element with class blue should have a background-color of blue.
+ testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
+ - text: The div element with class yellow should have a background-color of yellow.
+ testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
```
@@ -55,14 +60,30 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.russian.md
index 0bc0cb322b..ea816c5d5b 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.russian.md
@@ -2,27 +2,34 @@
id: 587d78a4367417b2b2512ad2
title: Learn about Tertiary Colors
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c3bRDAb
+forumTopicId: 301057
localeTitle: Узнайте о третичных цветах
---
## Description
- Компьютерные мониторы и экраны устройств создают разные цвета, комбинируя количество красного, зеленого и синего света. Это известно как цветовая модель RGB-аддитивности в современной теории цвета. Красный (R), зеленый (G) и синий (B) называются основными цветами. Смешивание двух основных цветов создает вторичные цвета cyan (G + B), пурпурный (R + B) и желтый (R + G). Вы видели эти цвета в задаче «Дополнительные цвета». Эти вторичные цвета являются дополнением к основному цвету, не используемому при их создании, и противоположны этому основному цвету на цветовом круге. Например, пурпурный цвет выполнен красным и синим цветом и является дополнением к зеленому. Третичные цвета являются результатом объединения основного цвета с одним из его вторичных соседних цветов. Например, красный (первичный) и желтый (вторичный) оранжевый. Это добавляет еще шесть цветов к простому цветному колесу в общей сложности двенадцать. Существуют различные способы выбора разных цветов, которые приводят к гармоничному сочетанию в дизайне. Один пример, который может использовать третичные цвета, называется схемой разделения цветов. Эта схема начинается с базового цвета, а затем соединяет ее с двумя цветами, которые смежны с его дополнением. Три цвета обеспечивают сильный визуальный контраст в дизайне, но более тонкие, чем использование двух дополнительных цветов. Вот три цвета, созданные с использованием схемы сплит-дополнений:
цвет
Шестнадцатеричный код
оранжевый
# FF7D00
циан
# 00FFFF
малина
# FF007D
+
+Компьютерные мониторы и экраны устройств создают разные цвета, комбинируя количество красного, зеленого и синего света. Это известно как цветовая модель RGB-аддитивности в современной теории цвета. Красный (R), зеленый (G) и синий (B) называются основными цветами. Смешивание двух основных цветов создает вторичные цвета cyan (G + B), пурпурный (R + B) и желтый (R + G). Вы видели эти цвета в задаче «Дополнительные цвета». Эти вторичные цвета являются дополнением к основному цвету, не используемому при их создании, и противоположны этому основному цвету на цветовом круге. Например, пурпурный цвет выполнен красным и синим цветом и является дополнением к зеленому. Третичные цвета являются результатом объединения основного цвета с одним из его вторичных соседних цветов. Например, красный (первичный) и желтый (вторичный) оранжевый. Это добавляет еще шесть цветов к простому цветному колесу в общей сложности двенадцать. Существуют различные способы выбора разных цветов, которые приводят к гармоничному сочетанию в дизайне. Один пример, который может использовать третичные цвета, называется схемой разделения цветов. Эта схема начинается с базового цвета, а затем соединяет ее с двумя цветами, которые смежны с его дополнением. Три цвета обеспечивают сильный визуальный контраст в дизайне, но более тонкие, чем использование двух дополнительных цветов. Вот три цвета, созданные с использованием схемы сплит-дополнений:
цвет
Шестнадцатеричный код
оранжевый
# FF7D00
циан
# 00FFFF
малина
# FF007D
+
## Instructions
- Измените свойство background-color классов orange , cyan и raspberry цветов на соответствующие цвета. Обязательно используйте шестнадцатеричные коды как оранжевые, а малины не являются признанными в браузере именами цветов.
+
+Измените свойство background-color классов orange , cyan и raspberry цветов на соответствующие цвета. Обязательно используйте шестнадцатеричные коды как оранжевые, а малины не являются признанными в браузере именами цветов.
+
## Tests
```yml
tests:
- - text: Элемент div с orange класса должен иметь оранжевый background-color .
- testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The div element with class orange should have a background-color of orange.");'
- - text: Элемент div с классом cyan должен иметь background-color cyan.
- testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The div element with class cyan should have a background-color of cyan.");'
- - text: Элемент div с классом raspberry должен иметь background-color малины.
- testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The div element with class raspberry should have a background-color of raspberry.");'
+ - text: The div element with class orange should have a background-color of orange.
+ testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
+ - text: The div element with class cyan should have a background-color of cyan.
+ testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
+ - text: The div element with class raspberry should have a background-color of raspberry.
+ testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
+ - text: All background-color values for the color classes should be hex codes and not color names.
+ testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
```
@@ -66,14 +73,38 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.russian.md
index 633b65a017..b07e5bdad9 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.russian.md
@@ -2,25 +2,30 @@
id: 587d78a9367417b2b2512ae8
title: Learn How Bezier Curves Work
challengeType: 0
-videoUrl: ''
-localeTitle: 'Узнайте, как работают кривые Безье'
+videoUrl: https://scrimba.com/c/c9bDrs8
+forumTopicId: 301058
+localeTitle: Узнайте, как работают кривые Безье
---
## Description
- Последняя задача animation-timing-function свойство animation-timing-function и несколько ключевых слов, которые изменяют скорость анимации в течение ее продолжительности. CSS предлагает опцию, отличную от ключевых слов, которая обеспечивает еще более точный контроль над тем, как анимация разыгрывается, используя кривые Безье. В анимациях CSS кривые Безье используются с функцией cubic-bezier . Форма кривой показывает, как анимация разыгрывается. Кривая живет в системе координат 1 на 1. Ось X этой системы координат - это продолжительность анимации (считайте ее временной шкалой), а ось Y - это изменение анимации. Функция cubic-bezier состоит из четырех основных точек, которые расположены на этой сетке 1 на 1: p0 , p1 , p2 и p3 . p0 и p3 для вас - это начальная и конечная точки, которые всегда расположены соответственно в начале (0, 0) и (1, 1). Вы устанавливаете значения x и y для двух других точек, а место размещения в сетке определяет форму кривой для анимации. Это делается в CSS, объявляя значения x и y опорных точек p1 и p2 в форме: (x1, y1, x2, y2) . Вытянув все это вместе, вот пример кривой Безье в CSS-коде: animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); В приведенном выше примере значения x и y эквивалентны для каждой точки (x1 = 0,25 = y1 и x2 = 0,75 = y2), которая, если вы помните из класса геометрии, приводит к строке, которая простирается от начала координат до точки (1 , 1). Эта анимация представляет собой линейное изменение элемента в течение длины анимации и совпадает с использованием linear ключевого слова. Другими словами, он изменяется с постоянной скоростью.
+
+Последняя задача animation-timing-function свойство animation-timing-function и несколько ключевых слов, которые изменяют скорость анимации в течение ее продолжительности. CSS предлагает опцию, отличную от ключевых слов, которая обеспечивает еще более точный контроль над тем, как анимация разыгрывается, используя кривые Безье. В анимациях CSS кривые Безье используются с функцией cubic-bezier . Форма кривой показывает, как анимация разыгрывается. Кривая живет в системе координат 1 на 1. Ось X этой системы координат - это продолжительность анимации (считайте ее временной шкалой), а ось Y - это изменение анимации. Функция cubic-bezier состоит из четырех основных точек, которые расположены на этой сетке 1 на 1: p0 , p1 , p2 и p3 . p0 и p3 для вас - это начальная и конечная точки, которые всегда расположены соответственно в начале (0, 0) и (1, 1). Вы устанавливаете значения x и y для двух других точек, а место размещения в сетке определяет форму кривой для анимации. Это делается в CSS, объявляя значения x и y опорных точек p1 и p2 в форме: (x1, y1, x2, y2) . Вытянув все это вместе, вот пример кривой Безье в CSS-коде: animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); В приведенном выше примере значения x и y эквивалентны для каждой точки (x1 = 0,25 = y1 и x2 = 0,75 = y2), которая, если вы помните из класса геометрии, приводит к строке, которая простирается от начала координат до точки (1 , 1). Эта анимация представляет собой линейное изменение элемента в течение длины анимации и совпадает с использованием linear ключевого слова. Другими словами, он изменяется с постоянной скоростью.
+
## Instructions
- Для элемента с идентификатором ball1 измените значение свойства animation-timing-function от linear до его эквивалентного значения функции cubic-bezier . Используйте значения точек, приведенные в примере выше.
+
+Для элемента с идентификатором ball1 измените значение свойства animation-timing-function от linear до его эквивалентного значения функции cubic-bezier . Используйте значения точек, приведенные в примере выше.
+
## Tests
```yml
tests:
- - text: Значение свойства animation-timing-function для элемента с ball1 должно быть линейно-эквивалентной функцией кубического безье.
- testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the animation-timing-function property for the element with the id ball1 should be the linear-equivalent cubic-bezier function.");'
- - text: Значение свойства animation-timing-function для элемента с id ball2 не должно меняться.
- testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id ball2 should not change.");'
+ - text: The value of the animation-timing-function property for the element with the id ball1 should be the linear-equivalent cubic-bezier function.
+ testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)');
+ - text: The value of the animation-timing-function property for the element with the id ball2 should not change.
+ testString: assert($('#ball2').css('animation-timing-function') == 'ease-out');
```
@@ -58,14 +63,14 @@ tests:
animation-timing-function: ease-out;
}
-@keyframes bounce {
- 0% {
- top: 0px;
+ @keyframes bounce {
+ 0% {
+ top: 0px;
+ }
+ 100% {
+ top: 249px;
+ }
}
- 100% {
- top: 249px;
- }
-}
@@ -76,14 +81,49 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.russian.md
index e62af394d3..a73e204710 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.russian.md
@@ -2,33 +2,38 @@
id: 587d78a7367417b2b2512adf
title: Learn How the CSS @keyframes and animation Properties Work
challengeType: 0
-videoUrl: ''
-localeTitle: 'Узнайте, как работают CSS-файлы и анимация CSS'
+videoUrl: https://scrimba.com/c/cakprhv
+forumTopicId: 301059
+localeTitle: Узнайте, как работают CSS-файлы и анимация CSS
---
## Description
- Чтобы анимировать элемент, вам нужно знать свойства анимации и правило @keyframes . Свойства анимации определяют, как должна себя вести анимация, и правило @keyframes контролирует, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Эта задача будет держать ее простой и охватывать две самые важные из них: animation-name задает имя анимации, которое позже используется @keyframes чтобы сообщить CSS, какие правила идут с анимацией. animation-duration задает animation-duration анимации. @keyframes - это то, как точно указать, что происходит в анимации в течение продолжительности. Это делается путем предоставления свойств CSS для определенных «кадров» во время анимации с процентами от 0% до 100%. Если вы сравниваете это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS на 100% - это то, как элемент появляется в конце, прямо перед броском кредитов. Затем CSS применяет магию для перехода элемента за заданную продолжительность, чтобы вывести сцену. Вот пример, иллюстрирующий использование @keyframes и свойств анимации:
Для элемента с anim идентификатором, фрагмент кода выше , задает animation-name , чтобы colorful и устанавливает animation-duration до 3 секунд. Затем правило @keyframes ссылается на свойства анимации с именем colorful . Он устанавливает цвет в синий цвет в начале анимации (0%), который к концу анимации перейдет в желтый цвет (100%). Вы не ограничены только начальными переходами, вы можете установить свойства для элемента для любого процента от 0% до 100%.
+
+Чтобы анимировать элемент, вам нужно знать свойства анимации и правило @keyframes . Свойства анимации определяют, как должна себя вести анимация, и правило @keyframes контролирует, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Эта задача будет держать ее простой и охватывать две самые важные из них: animation-name задает имя анимации, которое позже используется @keyframes чтобы сообщить CSS, какие правила идут с анимацией. animation-duration задает animation-duration анимации. @keyframes - это то, как точно указать, что происходит в анимации в течение продолжительности. Это делается путем предоставления свойств CSS для определенных «кадров» во время анимации с процентами от 0% до 100%. Если вы сравниваете это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS на 100% - это то, как элемент появляется в конце, прямо перед броском кредитов. Затем CSS применяет магию для перехода элемента за заданную продолжительность, чтобы вывести сцену. Вот пример, иллюстрирующий использование @keyframes и свойств анимации:
Для элемента с anim идентификатором, фрагмент кода выше , задает animation-name , чтобы colorful и устанавливает animation-duration до 3 секунд. Затем правило @keyframes ссылается на свойства анимации с именем colorful . Он устанавливает цвет в синий цвет в начале анимации (0%), который к концу анимации перейдет в желтый цвет (100%). Вы не ограничены только начальными переходами, вы можете установить свойства для элемента для любого процента от 0% до 100%.
+
## Instructions
- Создайте анимацию для элемента с id rect , установив animation-name на радугу и animation-duration до 4 секунд. Затем объявите правило @keyframes и установите background-color в начале анимации ( 0% ) на синий, середина анимации ( 50% ) на зеленый, а конец анимации ( 100% ) на желтый.
+
+Создайте анимацию для элемента с id rect , установив animation-name на радугу и animation-duration до 4 секунд. Затем объявите правило @keyframes и установите background-color в начале анимации ( 0% ) на синий, середина анимации ( 50% ) на зеленый, а конец анимации ( 100% ) на желтый.
+
## Tests
```yml
tests:
- - text: Элемент с идентификатором rect должен иметь свойство animation-name со значением радуги.
- testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of rect should have an animation-name property with a value of rainbow.");'
- - text: Элемент с идентификатором rect должен иметь свойство animation-duration со значением 4s.
- testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of rect should have an animation-duration property with a value of 4s.");'
- - text: Правило @keyframes должно использовать animation-name радуги.
- testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The @keyframes rule should use the animation-name of rainbow.");'
- - text: Правило @keyframes для радуги должно использовать background-color синего цвета при 0%.
- testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of blue at 0%.");'
- - text: Правило @keyframes для радуги должно использовать зеленый background-color на 50%.
- testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of green at 50%.");'
- - text: Правило @keyframes для радуги должно использовать background-color желтого цвета на 100%.
- testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of yellow at 100%.");'
+ - text: The element with id of rect should have an animation-name property with a value of rainbow.
+ testString: assert($('#rect').css('animation-name') == 'rainbow');
+ - text: The element with id of rect should have an animation-duration property with a value of 4s.
+ testString: assert($('#rect').css('animation-duration') == '4s');
+ - text: The @keyframes rule should use the animation-name of rainbow.
+ testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
+ - text: The @keyframes rule for rainbow should use a background-color of blue at 0%.
+ testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
+ - text: The @keyframes rule for rainbow should use a background-color of green at 50%.
+ testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
+ - text: The @keyframes rule for rainbow should use a background-color of yellow at 100%.
+ testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
```
@@ -64,14 +69,39 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.russian.md
index 6433372cb7..95347f6263 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.russian.md
@@ -2,27 +2,32 @@
id: 587d781e367417b2b2512acb
title: Lock an Element to its Parent with Absolute Positioning
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cyLJ7c3
+forumTopicId: 301060
localeTitle: Блокировка элемента для его родителя с абсолютным позиционированием
---
## Description
- Следующая опция для свойства position CSS является absolute , которая блокирует элемент на месте относительно его родительского контейнера. В отличие от relative положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего расположенного предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием position: relative; ), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body.
+
+Следующая опция для свойства position CSS является absolute , которая блокирует элемент на месте относительно его родительского контейнера. В отличие от relative положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего расположенного предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием position: relative; ), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body.
+
## Instructions
- Заблокируйте элемент #searchbar в верхнем правом углу родительского section , объявив его positionabsolute . Дайте ему top и right смещения по 50 пикселей каждый.
+
+Заблокируйте элемент #searchbar в верхнем правом углу родительского section , объявив его positionabsolute . Дайте ему top и right смещения по 50 пикселей каждый.
+
## Tests
```yml
tests:
- - text: 'Элемент #searchbar должен иметь absoluteposition .'
- testString: 'assert($("#searchbar").css("position") == "absolute", "The #searchbar element should have a position set to absolute.");'
- - text: 'Ваш код должен использовать top смещение CSS 50 пикселей в элементе #searchbar .'
- testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the top CSS offset of 50 pixels on the #searchbar element.");'
- - text: 'Ваш код должен использовать right смещение CSS 50 пикселей в элементе #searchbar .'
- testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the right CSS offset of 50 pixels on the #searchbar element.");'
+ - text: The #searchbar element should have a position set to absolute.
+ testString: assert($('#searchbar').css('position') == 'absolute');
+ - text: Your code should use the top CSS offset of 50 pixels on the #searchbar element.
+ testString: assert($('#searchbar').css('top') == '50px');
+ - text: Your code should use the right CSS offset of 50 pixels on the #searchbar element.
+ testString: assert($('#searchbar').css('right') == '50px');
```
@@ -59,14 +64,32 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
Welcome!
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.russian.md
index ab39b37433..e82aa22d46 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.russian.md
@@ -2,27 +2,32 @@
id: 587d781e367417b2b2512acc
title: Lock an Element to the Browser Window with Fixed Positioning
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c2MDNUR
+forumTopicId: 301061
localeTitle: Блокировка элемента в окне браузера с фиксированным позиционированием
---
## Description
- Следующая схема компоновки, которую предлагает CSS, - это fixed позиция, которая является типом абсолютного позиционирования, который блокирует элемент относительно окна браузера. Подобно абсолютному позиционированию, он используется со свойствами смещения CSS, а также удаляет элемент из обычного потока документа. Другие предметы больше не «реализуют», где они позиционируются, что может потребовать некоторых корректировок компоновки в другом месте. Одно ключевое различие между fixed и absolute позициями состоит в том, что элемент с фиксированной позицией не будет перемещаться, когда пользователь прокручивается.
+
+Следующая схема компоновки, которую предлагает CSS, - это fixed позиция, которая является типом абсолютного позиционирования, который блокирует элемент относительно окна браузера. Подобно абсолютному позиционированию, он используется со свойствами смещения CSS, а также удаляет элемент из обычного потока документа. Другие предметы больше не «реализуют», где они позиционируются, что может потребовать некоторых корректировок компоновки в другом месте. Одно ключевое различие между fixed и absolute позициями состоит в том, что элемент с фиксированной позицией не будет перемещаться, когда пользователь прокручивается.
+
## Instructions
- Навигационная панель в коде помечена идентификатором navbar . Измените его position на fixed и смещайте его на 0 пикселей top и на 0 пикселей left . Обратите внимание на (отсутствие) воздействия на позицию h1 , оно не было сдвинуто вниз, чтобы разместить панель навигации, и ее необходимо будет отрегулировать отдельно.
+
+Навигационная панель в коде помечена идентификатором navbar . Измените его position на fixed и смещайте его на 0 пикселей top и на 0 пикселей left . Обратите внимание на (отсутствие) воздействия на позицию h1 , оно не было сдвинуто вниз, чтобы разместить панель навигации, и ее необходимо будет отрегулировать отдельно.
+
## Tests
```yml
tests:
- - text: '#navbar элемент должен иметь position набор для fixed .'
- testString: 'assert($("#navbar").css("position") == "fixed", "The #navbar element should have a position set to fixed.");'
- - text: 'Ваш код должен использовать top сдвиг CSS в 0 пикселей в элементе #navbar .'
- testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the top CSS offset of 0 pixels on the #navbar element.");'
- - text: 'Ваш код должен использовать left сдвиг CSS в 0 пикселей на элементе #navbar .'
- testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the left CSS offset of 0 pixels on the #navbar element.");'
+ - text: The #navbar element should have a position set to fixed.
+ testString: assert($('#navbar').css('position') == 'fixed');
+ - text: Your code should use the top CSS offset of 0 pixels on the #navbar element.
+ testString: assert($('#navbar').css('top') == '0px');
+ - text: Your code should use the left CSS offset of 0 pixels on the #navbar element.
+ testString: assert($('#navbar').css('left') == '0px');
```
@@ -71,14 +76,44 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
Welcome!
+
+
+
I shift up when the #navbar is fixed to the browser window.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.russian.md
index 0bd06a89de..62c546dceb 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.russian.md
@@ -2,25 +2,30 @@
id: 587d78a8367417b2b2512ae4
title: Make a CSS Heartbeat using an Infinite Animation Count
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cDZpDUr
+forumTopicId: 301062
localeTitle: Сделайте Heartbeat с использованием бесконечного количества анимации
---
## Description
- Вот еще один пример непрерывной анимации с свойством animation-iteration-count которое использует сердце, которое вы разработали в предыдущем задании. Односекундная анимация сердечного ритма состоит из двух анимированных фигур. Элементы heart (включая :before и :after фрагментов) анимируются, чтобы изменить размер с помощью свойства transform , а фоновый div анимирован, чтобы изменить его цвет, используя свойство background .
+
+Вот еще один пример непрерывной анимации с свойством animation-iteration-count которое использует сердце, которое вы разработали в предыдущем задании. Односекундная анимация сердечного ритма состоит из двух анимированных фигур. Элементы heart (включая :before и :after фрагментов) анимируются, чтобы изменить размер с помощью свойства transform , а фоновый div анимирован, чтобы изменить его цвет, используя свойство background .
+
## Instructions
-undefined
+
+Keep the heart beating by adding the animation-iteration-count property for both the back class and the heart class and setting the value to infinite. The heart:before and heart:after selectors do not need any animation properties.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The animation-iteration-count property for the heart class should have a value of infinite.");'
- - text: ''
- testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The animation-iteration-count property for the back class should have a value of infinite.");'
+ - text: The animation-iteration-count property for the heart class should have a value of infinite.
+ testString: assert($('.heart').css('animation-iteration-count') == 'infinite');
+ - text: The animation-iteration-count property for the back class should have a value of infinite.
+ testString: assert($('.back').css('animation-iteration-count') == 'infinite');
```
@@ -106,14 +111,80 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.russian.md
index bb9c5f1bc0..1dbaf401a9 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.russian.md
@@ -2,23 +2,28 @@
id: 587d78a9367417b2b2512aea
title: Make Motion More Natural Using a Bezier Curve
challengeType: 0
-videoUrl: ''
-localeTitle: 'Сделать движение более естественным, используя кривую Безье'
+videoUrl: https://scrimba.com/c/c7akWUv
+forumTopicId: 301063
+localeTitle: Сделать движение более естественным, используя кривую Безье
---
## Description
- Этот вызов оживляет элемент для репликации движения шарика, который жонглирует. Предыдущие проблемы охватывали linear и ease-out кубические кривые Безье, однако они не отображали точное движение жонглирования. Для этого вам нужно настроить кривую Безье. Функция animation-timing-function автоматически зацикливается на каждом ключевом кадре, когда animation-iteration-count установлен на бесконечный. Поскольку в середине продолжительности анимации задано правило ключевого кадра (на 50% ), это приводит к двум идентичным прогрессиям анимации при движении мяча вверх и вниз. Следующая кубическая кривая Безье моделирует движение жонглирования: cubic-bezier(0.3, 0.4, 0.5, 1.6); Обратите внимание, что значение y2 больше 1. Хотя кубическая кривая Безье отображается в системе координат 1 на 1, и она может принимать только значения х от 0 до 1, значение y может быть установлено на числа, большие, чем единицы. Это приводит к прыгающему движению, которое идеально подходит для имитации шара жонглирования.
+
+Этот вызов оживляет элемент для репликации движения шарика, который жонглирует. Предыдущие проблемы охватывали linear и ease-out кубические кривые Безье, однако они не отображали точное движение жонглирования. Для этого вам нужно настроить кривую Безье. Функция animation-timing-function автоматически зацикливается на каждом ключевом кадре, когда animation-iteration-count установлен на бесконечный. Поскольку в середине продолжительности анимации задано правило ключевого кадра (на 50% ), это приводит к двум идентичным прогрессиям анимации при движении мяча вверх и вниз. Следующая кубическая кривая Безье моделирует движение жонглирования: cubic-bezier(0.3, 0.4, 0.5, 1.6); Обратите внимание, что значение y2 больше 1. Хотя кубическая кривая Безье отображается в системе координат 1 на 1, и она может принимать только значения х от 0 до 1, значение y может быть установлено на числа, большие, чем единицы. Это приводит к прыгающему движению, которое идеально подходит для имитации шара жонглирования.
+
## Instructions
- Измените значение функции animation-timing-function элемента с идентификатором green на функцию cubic-bezier с значениями x1, y1, x2, y2, установленными соответственно 0,311, 0,441, 0,444, 1,649.
+
+Измените значение функции animation-timing-function элемента с идентификатором green на функцию cubic-bezier с значениями x1, y1, x2, y2, установленными соответственно 0,311, 0,441, 0,444, 1,649.
+
## Tests
```yml
tests:
- - text: 'Значение свойства animation-timing-function для элемента с green идентификатором должно быть функцией cubic-bezier с значениями x1, y1, x2, y2, как указано.'
- testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.'
+ - text: The value of the animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.
+ testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)');
```
@@ -71,14 +76,48 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.russian.md
index ff31683f2d..ae221c75c8 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.russian.md
@@ -2,23 +2,28 @@
id: 58a7a6ebf9a6318348e2d5aa
title: Modify Fill Mode of an Animation
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cVJDmcE
+forumTopicId: 301064
localeTitle: Изменить режим заполнения анимации
---
## Description
- Это здорово, но пока это не работает. Обратите внимание, как сбрасывается анимация после 500ms , и кнопка возвращается к исходному цвету. Вы хотите, чтобы кнопка оставалась подсвеченной. Это можно сделать, установив свойство animation-fill-modeforwards . Режим animation-fill-mode задает стиль, применяемый к элементу, когда анимация завершена. Вы можете установить его так: animation-fill-mode: forwards;
+
+Это здорово, но пока это не работает. Обратите внимание, как сбрасывается анимация после 500ms , и кнопка возвращается к исходному цвету. Вы хотите, чтобы кнопка оставалась подсвеченной. Это можно сделать, установив свойство animation-fill-modeforwards . Режим animation-fill-mode задает стиль, применяемый к элементу, когда анимация завершена. Вы можете установить его так: animation-fill-mode: forwards;
+
## Instructions
- Задайте свойство animation-fill-modebutton:hoverforwards чтобы кнопка оставалась выделенной, когда пользователь наводил на нее курсор.
+
+Задайте свойство animation-fill-modebutton:hoverforwards чтобы кнопка оставалась выделенной, когда пользователь наводил на нее курсор.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "button:hover should have a animation-fill-mode property with a value of forwards.");'
+ - text: button:hover should have a animation-fill-mode property with a value of forwards.
+ testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi));
```
@@ -56,14 +61,31 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.russian.md
index 82a4f336e6..cc160fc6a2 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.russian.md
@@ -2,25 +2,30 @@
id: 587d781e367417b2b2512aca
title: Move a Relatively Positioned Element with CSS Offsets
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c9bQEA4
+forumTopicId: 301065
localeTitle: Перемещение Относительно Позиционированного Элемента с помощью смещений CSS
---
## Description
- Смещение CSS top или bottom , а также left или right указывают браузеру, насколько можно смещать элемент относительно того, где он будет сидеть в нормальном потоке документа. Вы компенсируете элемент вдали от заданного места, которое перемещает элемент от указанной стороны (фактически, в противоположном направлении). Как вы видели в последнем вызове, использование верхнего смещения сдвинуло h2 вниз. Аналогично, используя левое смещение перемещает элемент справа.
инструкции
Используйте смещения CSS для перемещения h2 15 пикселей вправо и 10 пикселей вверх.
тесты
tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
Сезон испытания
<head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body>
Решение
// solution required
+
+Смещение CSS top или bottom , а также left или right указывают браузеру, насколько можно смещать элемент относительно того, где он будет сидеть в нормальном потоке документа. Вы компенсируете элемент вдали от заданного места, которое перемещает элемент от указанной стороны (фактически, в противоположном направлении). Как вы видели в последнем вызове, использование верхнего смещения сдвинуло h2 вниз. Аналогично, используя левое смещение перемещает элемент справа.
инструкции
Используйте смещения CSS для перемещения h2 15 пикселей вправо и 10 пикселей вверх.
тесты
tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
Сезон испытания
<head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body>
Решение
// solution required
+
## Instructions
- Используйте смещения CSS для перемещения h2 15 пикселей вправо и 10 пикселей вверх.
+
+Используйте смещения CSS для перемещения h2 15 пикселей вправо и 10 пикселей вверх.
+
## Tests
```yml
tests:
- - text: 'Ваш код должен использовать смещение CSS для относительно позиционирования h2 10px вверх. Другими словами, переместите его на расстоянии 10 пикселей от bottom где он обычно сидит.'
- testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.");'
- - text: 'Ваш код должен использовать смещение CSS, чтобы относительно позиционировать h2 15px вправо. Другими словами, переместите его на 15 пикселей left от места, где он обычно сидит.'
- testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.");'
+ - text: Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.
+ testString: assert($('h2').css('bottom') == '10px');
+ - text: Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.
+ testString: assert($('h2').css('left') == '15px');
```
@@ -51,14 +56,26 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
On Being Well-Positioned
+
Move me!
+
I still think the h2 is where it normally sits.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.russian.md
index 6da537857f..68ce9125ca 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.russian.md
@@ -2,25 +2,30 @@
id: 587d78a3367417b2b2512ace
title: Push Elements Left or Right with the float Property
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c2MDqu2
+forumTopicId: 301066
localeTitle: Нажатие элементов влево или вправо с помощью свойства float
---
## Description
- Следующий инструмент позиционирования фактически не использует position , а устанавливает свойство float элемента. Плавающие элементы удаляются из нормального потока документа и перемещаются left или right от содержащего их родительского элемента. Он обычно используется с свойством width чтобы указать, сколько горизонтального пространства требуется для элемента с плавающей точкой.
+
+Следующий инструмент позиционирования фактически не использует position , а устанавливает свойство float элемента. Плавающие элементы удаляются из нормального потока документа и перемещаются left или right от содержащего их родительского элемента. Он обычно используется с свойством width чтобы указать, сколько горизонтального пространства требуется для элемента с плавающей точкой.
+
## Instructions
- Данная разметка будет хорошо работать в качестве макета из двух столбцов, с section и в aside элементов рядом друг с другом. Дайте элементу #leftfloatleft а элемент #right - floatright .
+
+Данная разметка будет хорошо работать в качестве макета из двух столбцов, с section и в aside элементов рядом друг с другом. Дайте элементу #leftfloatleft а элемент #right - floatright .
+
## Tests
```yml
tests:
- - text: Элемент с id left должен иметь значение floatleft .
- testString: 'assert($("#left").css("float") == "left", "The element with id left should have a float value of left.");'
- - text: Элемент с right id должен иметь значение floatright .
- testString: 'assert($("#right").css("float") == "right", "The element with id right should have a float value of right.");'
+ - text: The element with id left should have a float value of left.
+ testString: assert($('#left').css('float') == 'left');
+ - text: The element with id right should have a float value of right.
+ testString: assert($('#right').css('float') == 'right');
```
@@ -34,18 +39,18 @@ tests:
```html
@@ -66,14 +71,41 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
Welcome!
+
+
+
Content
+
Good stuff
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.russian.md
index 580c3cc51d..e5eba76ad9 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.russian.md
@@ -2,33 +2,38 @@
id: 587d781c367417b2b2512ac2
title: Set the font-size for Multiple Heading Elements
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cPpQNT3
+forumTopicId: 301067
localeTitle: Установите размер шрифта для нескольких элементов заголовка
---
## Description
- Свойство font-size используется для указания того, насколько большой текст в данном элементе. Это правило может использоваться для нескольких элементов для создания визуальной согласованности текста на странице. В этой задаче вы установите значения для всех тегов h1h6 чтобы сбалансировать размеры заголовков.
+
+Свойство font-size используется для указания того, насколько большой текст в данном элементе. Это правило может использоваться для нескольких элементов для создания визуальной согласованности текста на странице. В этой задаче вы установите значения для всех тегов h1h6 чтобы сбалансировать размеры заголовков.
+
## Instructions
-undefined
+
+
Set the font-size of the h1 tag to 68px.
Set the font-size of the h2 tag to 52px.
Set the font-size of the h3 tag to 40px.
Set the font-size of the h4 tag to 32px.
Set the font-size of the h5 tag to 21px.
Set the font-size of the h6 tag to 14px.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert($("h1").css("font-size") == "68px", "Your code should set the font-size property for the h1 tag to 68 pixels.");'
- - text: ''
- testString: 'assert($("h2").css("font-size") == "52px", "Your code should set the font-size property for the h2 tag to 52 pixels.");'
- - text: Ваш код должен установить свойство font-size для тега h3 до 40 пикселей.
- testString: 'assert($("h3").css("font-size") == "40px", "Your code should set the font-size property for the h3 tag to 40 pixels.");'
- - text: ''
- testString: 'assert($("h4").css("font-size") == "32px", "Your code should set the font-size property for the h4 tag to 32 pixels.");'
- - text: ''
- testString: 'assert($("h5").css("font-size") == "21px", "Your code should set the font-size property for the h5 tag to 21 pixels.");'
- - text: ''
- testString: 'assert($("h6").css("font-size") == "14px", "Your code should set the font-size property for the h6 tag to 14 pixels.");'
+ - text: Your code should set the font-size property for the h1 tag to 68 pixels.
+ testString: assert($('h1').css('font-size') == '68px');
+ - text: Your code should set the font-size property for the h2 tag to 52 pixels.
+ testString: assert($('h2').css('font-size') == '52px');
+ - text: Your code should set the font-size property for the h3 tag to 40 pixels.
+ testString: assert($('h3').css('font-size') == '40px');
+ - text: Your code should set the font-size property for the h4 tag to 32 pixels.
+ testString: assert($('h4').css('font-size') == '32px');
+ - text: Your code should set the font-size property for the h5 tag to 21 pixels.
+ testString: assert($('h5').css('font-size') == '21px');
+ - text: Your code should set the font-size property for the h6 tag to 14 pixels.
+ testString: assert($('h6').css('font-size') == '14px');
```
@@ -59,14 +64,38 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
This is h1 text
+
This is h2 text
+
This is h3 text
+
This is h4 text
+
This is h5 text
+
This is h6 text
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.russian.md
index 004394cf01..1599ffa107 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.russian.md
@@ -2,23 +2,28 @@
id: 587d781c367417b2b2512ac4
title: Set the font-size of Paragraph Text
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cVJ36Cr
+forumTopicId: 301068
localeTitle: Установите размер шрифта текста абзаца
---
## Description
- Свойство font-size в CSS не ограничивается заголовками, оно может применяться к любому элементу, содержащему текст.
+
+Свойство font-size в CSS не ограничивается заголовками, оно может применяться к любому элементу, содержащему текст.
+
## Instructions
- Измените значение свойства font-size для абзаца на 16 пикселей, чтобы сделать его более видимым.
+
+Измените значение свойства font-size для абзаца на 16 пикселей, чтобы сделать его более видимым.
+
## Tests
```yml
tests:
- - text: Ваш тег p должен иметь font-size 16 пикселей.
- testString: 'assert($("p").css("font-size") == "16px", "Your p tag should have a font-size of 16 pixels.");'
+ - text: Your p tag should have a font-size of 16 pixels.
+ testString: assert($('p').css('font-size') == '16px');
```
@@ -43,14 +48,20 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.russian.md
index 8306283c4d..5c62d70419 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.russian.md
@@ -2,33 +2,38 @@
id: 587d781c367417b2b2512ac3
title: Set the font-weight for Multiple Heading Elements
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/crVWRHq
+forumTopicId: 301069
localeTitle: Установите вес шрифта для нескольких элементов заголовка
---
## Description
- Вы устанавливаете font-size для каждого заголовка в последнем вызове, здесь вы настраиваете font-weight . Свойство font-weight устанавливает, как толстые или тонкие символы находятся в разделе текста.
+
+Вы устанавливаете font-size для каждого заголовка в последнем вызове, здесь вы настраиваете font-weight . Свойство font-weight устанавливает, как толстые или тонкие символы находятся в разделе текста.
+
## Instructions
-
Установите font-weight тега h1 равным 800.
Установите font-weight тега h2 равным 600.
Установите font-weight тега h3 равным 500.
Установите font-weight тега h4 равным 400.
Установите font-weight тега h5 равным 300.
Установите font-weight тега h6 равным 200.
+
+
Установите font-weight тега h1 равным 800.
Установите font-weight тега h2 равным 600.
Установите font-weight тега h3 равным 500.
Установите font-weight тега h4 равным 400.
Установите font-weight тега h5 равным 300.
Установите font-weight тега h6 равным 200.
+
## Tests
```yml
tests:
- - text: Ваш код должен установить свойство font-weight для тега h1 равным 800.
- testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the font-weight property for the h1 tag to 800.");'
- - text: Ваш код должен установить свойство font-weight для тега h2 равным 600.
- testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the font-weight property for the h2 tag to 600.");'
- - text: Ваш код должен установить свойство font-weight для тега h3 равным 500.
- testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the font-weight property for the h3 tag to 500.");'
- - text: Ваш код должен установить свойство font-weight для тега h4 равным 400.
- testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the font-weight property for the h4 tag to 400.");'
- - text: Ваш код должен установить свойство font-weight для тега h5 равным 300.
- testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the font-weight property for the h5 tag to 300.");'
- - text: Ваш код должен установить свойство font-weight для тега h6 равным 200.
- testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the font-weight property for the h6 tag to 200.");'
+ - text: Your code should set the font-weight property for the h1 tag to 800.
+ testString: assert($('h1').css('font-weight') == '800');
+ - text: Your code should set the font-weight property for the h2 tag to 600.
+ testString: assert($('h2').css('font-weight') == '600');
+ - text: Your code should set the font-weight property for the h3 tag to 500.
+ testString: assert($('h3').css('font-weight') == '500');
+ - text: Your code should set the font-weight property for the h4 tag to 400.
+ testString: assert($('h4').css('font-weight') == '400');
+ - text: Your code should set the font-weight property for the h5 tag to 300.
+ testString: assert($('h5').css('font-weight') == '300');
+ - text: Your code should set the font-weight property for the h6 tag to 200.
+ testString: assert($('h6').css('font-weight') == '200');
```
@@ -77,14 +82,44 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
This is h1 text
+
This is h2 text
+
This is h3 text
+
This is h4 text
+
This is h5 text
+
This is h6 text
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.russian.md
index 0932ade4b5..9c95cb5760 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.russian.md
@@ -2,23 +2,28 @@
id: 587d781d367417b2b2512ac5
title: Set the line-height of Paragraphs
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/crVWdcv
+forumTopicId: 301070
localeTitle: Задайте высоту строки абзацев
---
## Description
- CSS предлагает свойство line-height для изменения высоты каждой строки в блоке текста. Как следует из названия, он изменяет количество вертикального пространства, которое получает каждая строка текста.
+
+CSS предлагает свойство line-height для изменения высоты каждой строки в блоке текста. Как следует из названия, он изменяет количество вертикального пространства, которое получает каждая строка текста.
+
## Instructions
- Добавьте свойство line-height в тег p и установите его на 25 пикселей.
+
+Добавьте свойство line-height в тег p и установите его на 25 пикселей.
+
## Tests
```yml
tests:
- - text: Ваш код должен установить line-height тега p до 25 пикселей.
- testString: 'assert($("p").css("line-height") == "25px", "Your code should set the line-height of the p tag to 25 pixels.");'
+ - text: Your code should set the line-height of the p tag to 25 pixels.
+ testString: assert($('p').css('line-height') == '25px');
```
@@ -44,14 +49,21 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.russian.md
index 242971f56d..708bbb95f4 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.russian.md
@@ -2,27 +2,32 @@
id: 587d78a9367417b2b2512ae9
title: Use a Bezier Curve to Move a Graphic
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c6bnRCK
+forumTopicId: 301071
localeTitle: Используйте кривую Безье для перемещения графика
---
## Description
- В предыдущем задании обсуждалось ключевое слово ease-out которое описывает изменение анимации, которое ускоряется сначала, а затем замедляется в конце анимации. Справа показана разница между ключевым словом ease-out (для синего элемента) и linear ключевым словом (для красного элемента). Подобные анимационные прогрессии к ease-out ключевому слову могут быть достигнуты с помощью пользовательской кубической функции кривой Безье. В общем случае изменение опорных точек p1 и p2 приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье с использованием значений, имитирующих стиль непринужденности: animation-timing-function: cubic-bezier(0, 0, 0.58, 1); Помните, что все функции cubic-bezier начинаются с p0 at (0, 0) и заканчиваются p3 в (1, 1). В этом примере кривая движется быстрее по оси Y (начинается с 0, переходит в p1 y значение 0, затем переходит в значение p2 y 1), чем она перемещается по оси X (0 для начала, затем 0 для p1 , до 0,58 для p2 ). В результате изменение анимированного элемента происходит быстрее, чем время анимации для этого сегмента. К концу кривой соотношение между изменением значений x и y меняется на противоположное - значение y перемещается от 1 до 1 (без изменений), а значения x перемещаются от 0,58 до 1, что делает изменения анимации медленнее по сравнению с продолжительность анимации.
+
+В предыдущем задании обсуждалось ключевое слово ease-out которое описывает изменение анимации, которое ускоряется сначала, а затем замедляется в конце анимации. Справа показана разница между ключевым словом ease-out (для синего элемента) и linear ключевым словом (для красного элемента). Подобные анимационные прогрессии к ease-out ключевому слову могут быть достигнуты с помощью пользовательской кубической функции кривой Безье. В общем случае изменение опорных точек p1 и p2 приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье с использованием значений, имитирующих стиль непринужденности: animation-timing-function: cubic-bezier(0, 0, 0.58, 1); Помните, что все функции cubic-bezier начинаются с p0 at (0, 0) и заканчиваются p3 в (1, 1). В этом примере кривая движется быстрее по оси Y (начинается с 0, переходит в p1 y значение 0, затем переходит в значение p2 y 1), чем она перемещается по оси X (0 для начала, затем 0 для p1 , до 0,58 для p2 ). В результате изменение анимированного элемента происходит быстрее, чем время анимации для этого сегмента. К концу кривой соотношение между изменением значений x и y меняется на противоположное - значение y перемещается от 1 до 1 (без изменений), а значения x перемещаются от 0,58 до 1, что делает изменения анимации медленнее по сравнению с продолжительность анимации.
+
## Instructions
- Чтобы увидеть эффект этой кривой Безье в действии, измените animation-timing-function элемента с id red на функцию cubic-bezier с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом.
+
+Чтобы увидеть эффект этой кривой Безье в действии, измените animation-timing-function элемента с id red на функцию cubic-bezier с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом.
+
## Tests
```yml
tests:
- - text: 'Значение свойства animation-timing-function элемента с red id должно быть функцией cubic-bezier с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0,58, 1.'
- testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
- - text: Элемент с red идентификатором должен больше не обладать свойством animation-timing-function линейным.
- testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id red should no longer have the animation-timing-function property of linear.");'
- - text: Значение свойства animation-timing-function для элемента с blue не должно изменяться.
- testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id blue should not change.");'
+ - text: The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .
+ testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)');
+ - text: The element with the id red should no longer have the animation-timing-function property of linear.
+ testString: assert($('#red').css('animation-timing-function') !== 'linear');
+ - text: The value of the animation-timing-function property for the element with the id blue should not change.
+ testString: assert($('#blue').css('animation-timing-function') == 'ease-out');
```
@@ -71,14 +76,44 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.russian.md
index bedc240774..5aeefec72b 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.russian.md
@@ -2,33 +2,38 @@
id: 587d78a5367417b2b2512ad7
title: Use a CSS Linear Gradient to Create a Striped Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c6bmQh2
+forumTopicId: 301072
localeTitle: Используйте линейный градиент CSS для создания полосатого элемента
---
## Description
- Функция repeating-linear-gradient() очень похожа на linear-gradient() с большой разницей, что повторяет заданный шаблон градиента. repeating-linear-gradient() принимает множество значений, но для простоты вы будете работать с значениями угла и значениями остановки цвета в этой задаче. Значением угла является направление градиента. Остановки цвета - это значения ширины, которые указывают, где происходит переход, и даются с процентом или количеством пикселей. В примере, показанном в редакторе кода, градиент начинается с yellow цвета в 0 пикселей, который смешивается со вторым blue цветом в 40 пикселей от начала. Так как следующая остановка цвета также находится на 40 пикселях, градиент сразу же меняется на третий green цвет, который сам вписывается в четвертое значение цвета red которое составляет 80 пикселей от начала градиента. В этом примере это помогает думать о цветовых остановках как о парах, где смешиваются два разных цвета. 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску.
+
+Функция repeating-linear-gradient() очень похожа на linear-gradient() с большой разницей, что повторяет заданный шаблон градиента. repeating-linear-gradient() принимает множество значений, но для простоты вы будете работать с значениями угла и значениями остановки цвета в этой задаче. Значением угла является направление градиента. Остановки цвета - это значения ширины, которые указывают, где происходит переход, и даются с процентом или количеством пикселей. В примере, показанном в редакторе кода, градиент начинается с yellow цвета в 0 пикселей, который смешивается со вторым blue цветом в 40 пикселей от начала. Так как следующая остановка цвета также находится на 40 пикселях, градиент сразу же меняется на третий green цвет, который сам вписывается в четвертое значение цвета red которое составляет 80 пикселей от начала градиента. В этом примере это помогает думать о цветовых остановках как о парах, где смешиваются два разных цвета. 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску.
+
## Instructions
- Сделайте полосы, изменив repeating-linear-gradient() чтобы использовать градиентный угол 45deg , затем установите, чтобы первые два цвета остановились на yellow , и, наконец, второй цвет прекратился до black .
+
+Сделайте полосы, изменив repeating-linear-gradient() чтобы использовать градиентный угол 45deg , затем установите, чтобы первые два цвета остановились на yellow , и, наконец, второй цвет прекратился до black .
+
## Tests
```yml
tests:
- - text: Угол repeating-linear-gradient() должен быть 45deg.
- testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the repeating-linear-gradient() should be 45deg.");'
- - text: Угол repeating-linear-gradient() должен превышать 90 градусов
- testString: 'assert(!code.match(/90deg/gi), "The angle of the repeating-linear-gradient() should no longer be 90deg");'
- - text: Остановка цвета в 0 пикселях должна быть yellow .
- testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be yellow.");'
- - text: Одна остановка цвета на 40 пикселей должна быть yellow .
- testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be yellow.");'
- - text: Вторая остановка цвета на 40 пикселей должна быть black .
- testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be black.");'
- - text: Последняя остановка цвета на 80 пикселей должна быть black .
- testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be black.");'
+ - text: The angle of the repeating-linear-gradient() should be 45deg.
+ testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
+ - text: The angle of the repeating-linear-gradient() should no longer be 90deg
+ testString: assert(!code.match(/90deg/gi));
+ - text: The color stop at 0 pixels should be yellow.
+ testString: assert(code.match(/yellow\s+?0(px)?/gi));
+ - text: One color stop at 40 pixels should be yellow.
+ testString: assert(code.match(/yellow\s+?40px/gi));
+ - text: The second color stop at 40 pixels should be black.
+ testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
+ - text: The last color stop at 80 pixels should be black.
+ testString: assert(code.match(/black\s+?80px/gi));
```
@@ -64,14 +69,28 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.russian.md
index 90e002f926..5b8456bffc 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.russian.md
@@ -2,25 +2,30 @@
id: 587d78a7367417b2b2512ae0
title: Use CSS Animation to Change the Hover State of a Button
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cg4vZAa
+forumTopicId: 301073
localeTitle: Использование анимации CSS для изменения состояния наведения кнопки
---
## Description
- Вы можете использовать CSS @keyframes для изменения цвета кнопки в состоянии зависания. Ниже приведен пример изменения ширины изображения при наведении:
<img src = "https://bit.ly/smallgooglelogo" alt = "Логотип Google" />
+
+Вы можете использовать CSS @keyframes для изменения цвета кнопки в состоянии зависания. Ниже приведен пример изменения ширины изображения при наведении:
<img src = "https://bit.ly/smallgooglelogo" alt = "Логотип Google" />
+
## Instructions
- Обратите внимание, что ms обозначает миллисекунды, где 1000 мс равно 1 с. Используйте CSS @keyframes чтобы изменить background-color элемента button чтобы он стал #4791d0 когда пользователь #4791d0 на него курсор. Правило @keyframes должно содержать только запись на 100% .
+
+Обратите внимание, что ms обозначает миллисекунды, где 1000 мс равно 1 с. Используйте CSS @keyframes чтобы изменить background-color элемента button чтобы он стал #4791d0 когда пользователь #4791d0 на него курсор. Правило @keyframes должно содержать только запись на 100% .
+
## Tests
```yml
tests:
- - text: Правило @keyframes должно использовать фоновый цвет animation-name .
- testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the animation-name background-color.");'
- - text: 'В разделе @keyframes должно быть одно правило, которое изменяет background-color на #4791d0 на 100%.'
- testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.");'
+ - text: The @keyframes rule should use the animation-name background-color.
+ testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g));
+ - text: There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.
+ testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
```
@@ -54,14 +59,32 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.russian.md
index f3d7d904c0..8e754dbcf5 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.russian.md
@@ -2,23 +2,28 @@
id: 587d78a6367417b2b2512adb
title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cyLP8Sr
+forumTopicId: 301074
localeTitle: Используйте свойство преобразования CSS Transform для искажения элемента по оси X
---
## Description
- Следующей функцией свойства transform является skewX() , которая искажает выбранный элемент вдоль его оси X (горизонтальной) на заданную степень. Следующий код перекосит элемент абзаца на -32 градуса по оси X.
п { transform: skewX (-32deg); }
+
+Следующей функцией свойства transform является skewX() , которая искажает выбранный элемент вдоль его оси X (горизонтальной) на заданную степень. Следующий код перекосит элемент абзаца на -32 градуса по оси X.
п { transform: skewX (-32deg); }
+
## Instructions
- Перекосите элемент с bottom на 24 градуса по оси X, используя свойство transform .
+
+Перекосите элемент с bottom на 24 градуса по оси X, используя свойство transform .
+
## Tests
```yml
tests:
- - text: Элемент с bottom id должен быть перекошен на 24 градуса по оси X.
- testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id bottom should be skewed by 24 degrees along its X-axis.");'
+ - text: The element with id bottom should be skewed by 24 degrees along its X-axis.
+ testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
```
@@ -52,14 +57,28 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.russian.md
index 0d8f0ed815..808067b543 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.russian.md
@@ -2,23 +2,28 @@
id: 587d78a6367417b2b2512adc
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c2MZ2uB
+forumTopicId: 301075
localeTitle: Используйте свойство CSS Transform Property skewY для искажения элемента по оси Y
---
## Description
- Учитывая, что skewX() выделенный элемент вдоль оси X на заданную степень, неудивительно, что skewY() элемент вдоль оси Y (по вертикали).
+
+Учитывая, что skewX() выделенный элемент вдоль оси X на заданную степень, неудивительно, что skewY() элемент вдоль оси Y (по вертикали).
+
## Instructions
- Перекосите элемент с идентификатором top -10 градусов по оси Y, используя свойство transform .
+
+Перекосите элемент с идентификатором top -10 градусов по оси Y, используя свойство transform .
+
## Tests
```yml
tests:
- - text: Элемент с top id должен быть перекошен на -10 градусов по оси Y.
- testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id top should be skewed by -10 degrees along its Y-axis.");'
+ - text: The element with id top should be skewed by -10 degrees along its Y-axis.
+ testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
```
@@ -53,14 +58,29 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.russian.md
index e136577ebc..6cd986b85b 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.russian.md
@@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ad9
title: Use the CSS Transform scale Property to Change the Size of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c2MZVSg
+forumTopicId: 301076
localeTitle: Используйте свойство масштабирования CSS Transform для изменения размера элемента
---
## Description
- Чтобы изменить масштаб элемента, CSS имеет свойство transform , а также функцию scale() . Следующий пример кода удваивает размер всех элементов абзаца на странице:
п { преобразования: масштаб (2); }
+
+Чтобы изменить масштаб элемента, CSS имеет свойство transform , а также функцию scale() . Следующий пример кода удваивает размер всех элементов абзаца на странице:
п { преобразования: масштаб (2); }
+
## Instructions
- Увеличьте размер элемента с идентификатором ball2 до его первоначального размера в 1,5 раза.
+
+Увеличьте размер элемента с идентификатором ball2 до его первоначального размера в 1,5 раза.
+
## Tests
```yml
tests:
- - text: 'Установите свойство transform для #ball2 чтобы увеличить его размер в 1,5 раза.'
- testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the transform property for #ball2 to scale it 1.5 times its size.");'
+ - text: Set the transform property for #ball2 to scale it 1.5 times its size.
+ testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi));
```
@@ -61,14 +66,35 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.russian.md
index b70bf75c07..12ee8c081a 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.russian.md
@@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ada
title: Use the CSS Transform scale Property to Scale an Element on Hover
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cyLPJuM
+forumTopicId: 301077
localeTitle: Используйте свойство масштабирования CSS Transform для масштабирования элемента при наведении
---
## Description
- Свойство transform имеет множество функций, которые позволяют масштабировать, перемещать, вращать, перекосить и т. Д. Ваши элементы. При использовании с псевдоклассами, такими как :hover которые определяют определенное состояние элемента, свойство transform может легко добавлять интерактивность к вашим элементам. Ниже приведен пример масштабирования элементов абзаца в 2.1 раза по сравнению с их первоначальным размером, когда пользователь на них наводит:
p: hover { transform: масштаб (2.1); }
+
+Свойство transform имеет множество функций, которые позволяют масштабировать, перемещать, вращать, перекосить и т. Д. Ваши элементы. При использовании с псевдоклассами, такими как :hover которые определяют определенное состояние элемента, свойство transform может легко добавлять интерактивность к вашим элементам. Ниже приведен пример масштабирования элементов абзаца в 2.1 раза по сравнению с их первоначальным размером, когда пользователь на них наводит:
p: hover { transform: масштаб (2.1); }
+
## Instructions
- Добавьте правило CSS для состояния hoverdiv и используйте свойство transform для масштабирования элемента div до 1,1 раз по сравнению с его первоначальным размером, когда пользователь на него наводится.
+
+Добавьте правило CSS для состояния hoverdiv и используйте свойство transform для масштабирования элемента div до 1,1 раз по сравнению с его первоначальным размером, когда пользователь на него наводится.
+
## Tests
```yml
tests:
- - text: 'Размер элемента div должен масштабироваться в 1,1 раза, когда пользователь на него нависает.'
- testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the div element should scale 1.1 times when the user hovers over it.");'
+ - text: The size of the div element should scale 1.1 times when the user hovers over it.
+ testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
```
@@ -52,14 +57,28 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.russian.md
index 873f3843b8..d9522b0bab 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.russian.md
@@ -2,25 +2,30 @@
id: 587d781a367417b2b2512ab9
title: Use the em Tag to Italicize Text
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cVJRBtp
+forumTopicId: 301078
localeTitle: Используйте тег em для текста курсива
---
## Description
- Чтобы подчеркнуть текст, вы можете использовать тег em . Это отображает текст как курсив, так как браузер применяет CSS стиля font-style: italic; к элементу.
+
+Чтобы подчеркнуть текст, вы можете использовать тег em . Это отображает текст как курсив, так как браузер применяет CSS стиля font-style: italic; к элементу.
+
## Instructions
- Оберните тег em вокруг содержимого тега абзаца, чтобы подчеркнуть его.
+
+Оберните тег em вокруг содержимого тега абзаца, чтобы подчеркнуть его.
+
## Tests
```yml
tests:
- - text: Ваш код должен добавить тег em в разметку.
- testString: 'assert($("em").length == 1, "Your code should add an em tag to the markup.");'
- - text: Тег em должен обертывать содержимое тега p но не сам тег p .
- testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The em tag should wrap around the contents of the p tag but not the p tag itself.");'
+ - text: Your code should add an em tag to the markup.
+ testString: assert($('em').length == 1);
+ - text: The em tag should wrap around the contents of the p tag but not the p tag itself.
+ testString: assert($('p').children().length == 1 && $('em').children().length == 2);
```
@@ -75,14 +80,50 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Google
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.russian.md
index 4238cc72f8..09d3a43991 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.russian.md
@@ -3,26 +3,31 @@ id: 587d781b367417b2b2512aba
title: Use the s Tag to Strikethrough Text
challengeType: 0
videoUrl: ''
+forumTopicId: 301079
localeTitle: Используйте тег s для текста зачеркивания
---
## Description
- Чтобы зачеркнуть текст, когда горизонтальная линия пересекает символы, вы можете использовать тег s . Он показывает, что часть текста больше не действительна. С помощью тега s браузер применяет CSS text-decoration: line-through; к элементу.
+
+Чтобы зачеркнуть текст, когда горизонтальная линия пересекает символы, вы можете использовать тег s . Он показывает, что часть текста больше не действительна. С помощью тега s браузер применяет CSS text-decoration: line-through; к элементу.
+
## Instructions
- Оберните тег s вокруг «Google» внутри тега h4 а затем добавьте слово «Алфавит» рядом с ним, в котором не должно быть форматирования зачеркивания.
+
+Оберните тег s вокруг «Google» внутри тега h4 а затем добавьте слово «Алфавит» рядом с ним, в котором не должно быть форматирования зачеркивания.
+
## Tests
```yml
tests:
- - text: Ваш код должен добавить к метке один тег s .
- testString: 'assert($("s").length == 1, "Your code should add one s tag to the markup.");'
- - text: Тег s должен обтекать текст Google в теге h4 . Он не должен содержать слово «Алфавит».
- testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A s tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.");'
- - text: 'Включите слово «Алфавит» в тег h4 , без форматирования зачеркиванием.'
- testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the h4 tag, without strikethrough formatting.");'
+ - text: Your code should add one s tag to the markup.
+ testString: assert($('s').length == 1);
+ - text: A s tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.
+ testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi));
+ - text: Include the word Alphabet in the h4 tag, without strikethrough formatting.
+ testString: assert($('h4').html().match(/Alphabet/gi));
```
@@ -77,14 +82,50 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Google Alphabet
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.russian.md
index 72325aedab..a5824a82e2 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.russian.md
@@ -2,27 +2,32 @@
id: 587d781a367417b2b2512ab7
title: Use the strong Tag to Make Text Bold
challengeType: 0
-videoUrl: ''
-localeTitle: 'Используйте сильный тег, чтобы сделать текст полужирным'
+videoUrl: https://scrimba.com/c/ceJNBSb
+forumTopicId: 301080
+localeTitle: Используйте сильный тег, чтобы сделать текст полужирным
---
## Description
- Чтобы сделать текст полужирным, вы можете использовать strong тег. Это часто используется, чтобы привлечь внимание к тексту и символизировать, что это важно. С strong тегом браузер применяет CSS font-weight: bold; к элементу.
+
+Чтобы сделать текст полужирным, вы можете использовать strong тег. Это часто используется, чтобы привлечь внимание к тексту и символизировать, что это важно. С strong тегом браузер применяет CSS font-weight: bold; к элементу.
+
## Instructions
- Оберните strong бирку вокруг «Стэнфордского университета» внутри тега p .
+
+Оберните strong бирку вокруг «Стэнфордского университета» внутри тега p .
+
## Tests
```yml
tests:
- - text: Ваш код должен добавить один strong тег к разметке.
- testString: 'assert($("strong").length == 1, "Your code should add one strong tag to the markup.");'
- - text: strong тег должен находиться внутри тега p .
- testString: 'assert($("p").children("strong").length == 1, "The strong tag should be inside the p tag.");'
- - text: strong бирка должна охватывать слова «Стэнфордский университет».
- testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The strong tag should wrap around the words "Stanford University".");'
+ - text: Your code should add one strong tag to the markup.
+ testString: assert($('strong').length == 1);
+ - text: The strong tag should be inside the p tag.
+ testString: assert($('p').children('strong').length == 1);
+ - text: The strong tag should wrap around the words "Stanford University".
+ testString: assert($('strong').text().match(/^Stanford University$/gi));
```
@@ -77,14 +82,50 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Google
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.russian.md
index d978f014aa..8903051aae 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.russian.md
@@ -2,25 +2,30 @@
id: 587d781c367417b2b2512ac0
title: Use the text-transform Property to Make Text Uppercase
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cvVZQSP
+forumTopicId: 301081
localeTitle: Используйте свойство text-transform для создания текста в верхнем регистре
---
## Description
- Свойство text-transform в CSS используется для изменения внешнего вида текста. Это удобный способ убедиться, что текст на веб-странице отображается постоянно, без необходимости изменять текстовое содержимое фактических элементов HTML. В следующей таблице показано, как различные значения text-transform изменяют текст примера «Transform me».
Стоимость
результат
lowercase
"трансформировать меня"
uppercase
"TRANSFORM ME"
capitalize
«Трансформировать меня»
initial
Использовать значение по умолчанию
inherit
Используйте значение text-transform из родительского элемента
none
По умолчанию: используйте исходный текст
+
+Свойство text-transform в CSS используется для изменения внешнего вида текста. Это удобный способ убедиться, что текст на веб-странице отображается постоянно, без необходимости изменять текстовое содержимое фактических элементов HTML. В следующей таблице показано, как различные значения text-transform изменяют текст примера «Transform me».
Стоимость
результат
lowercase
"трансформировать меня"
uppercase
"TRANSFORM ME"
capitalize
«Трансформировать меня»
initial
Использовать значение по умолчанию
inherit
Используйте значение text-transform из родительского элемента
none
По умолчанию: используйте исходный текст
+
## Instructions
- Преобразуйте текст h4 в верхний регистр, используя свойство text-transform .
+
+Преобразуйте текст h4 в верхний регистр, используя свойство text-transform .
+
## Tests
```yml
tests:
- - text: Текст h4 должен быть прописным.
- testString: 'assert($("h4").css("text-transform") === "uppercase", "The h4 text should be uppercase.");'
- - text: Исходный текст h4 не должен изменяться.
- testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
+ - text: The h4 text should be uppercase.
+ testString: assert($('h4').css('text-transform') === 'uppercase');
+ - text: The original text of the h4 should not be changed.
+ testString: assert(($('h4').text() !== $('h4').text().toUpperCase()));
```
@@ -83,14 +88,58 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Alphabet
+
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.russian.md
index f182760ef7..6f1d3e9250 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.russian.md
@@ -2,25 +2,30 @@
id: 587d781a367417b2b2512ab8
title: Use the u Tag to Underline Text
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cN6aQCL
+forumTopicId: 301082
localeTitle: Используйте тег u для подчеркивания текста
---
## Description
- Чтобы подчеркнуть текст, вы можете использовать тег u . Это часто используется для обозначения важности раздела текста или чего-то, что нужно запомнить. С тегом u браузер применяет CSS text-decoration: underline; к элементу.
+
+Чтобы подчеркнуть текст, вы можете использовать тег u . Это часто используется для обозначения важности раздела текста или чего-то, что нужно запомнить. С тегом u браузер применяет CSS text-decoration: underline; к элементу.
+
## Instructions
- Оберните тег u только вокруг текста «Ph.D. students». Заметка Старайтесь избегать использования тега u когда его можно путать для ссылки. Якорные теги также имеют стандартное подчеркнутое форматирование.
+
+Оберните тег u только вокруг текста «Ph.D. students». Заметка Старайтесь избегать использования тега u когда его можно путать для ссылки. Якорные теги также имеют стандартное подчеркнутое форматирование.
+
## Tests
```yml
tests:
- - text: Ваш код должен добавить тег u в разметку.
- testString: 'assert($("u").length === 1, "Your code should add a u tag to the markup.");'
- - text: Тег u должен обернуться вокруг текста «Ph.D. students».
- testString: 'assert($("u").text() === "Ph.D. students", "The u tag should wrap around the text "Ph.D. students".");'
+ - text: Your code should add a u tag to the markup.
+ testString: assert($('u').length === 1);
+ - text: The u tag should wrap around the text "Ph.D. students".
+ testString: assert($('u').text() === 'Ph.D. students');
```
@@ -75,14 +80,50 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
Google
+
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.russian.md
index 475ab7294c..d433f92697 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.russian.md
@@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf08823
title: Add a Negative Margin to an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cnpyGs3
+forumTopicId: 16166
localeTitle: Добавить отрицательные поля к элементу
---
-## Описание
-Значение margin (поле) элемента контролирует объем пространства между значением border (границей) элемента и окружающими элементами. Если вы установите значение margin отрицательным, то размер элемента увеличится.
+## Description
+
+Значение margin (поле) элемента контролирует объем пространства между значением border (границей) элемента и окружающими элементами. Если вы установите значение margin отрицательным, то размер элемента увеличится.
+
-## Инструкции
- Попытайтесь установить значение margin отрицательным, как у красного окна. Установите margin синего окна равным -15px, чтобы он заполнил всю горизонтальную ширину желтой рамки вокруг него.
+## Instructions
+
+Попытайтесь установить значение margin отрицательным, как у красного окна. Установите margin синего окна равным -15px, чтобы он заполнил всю горизонтальную ширину желтой рамки вокруг него.
+
-## Тесты
+## Tests
```yml
tests:
- - text: Ваш класс blue-box должен иметь значение margin равное -15px.
- testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your blue-box class should give elements -15px of margin.");'
+ - text: Your blue-box class should give elements -15px of margin.
+ testString: assert($(".blue-box").css("margin-top") === "-15px");
```
-## Исходной код
+## Challenge Seed
@@ -72,14 +77,50 @@ tests:
-
-
-## Решение
+## Solution
-```js
-// впишите ваш код решения
+```html
+
+
+
+
padding
+
padding
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-borders-around-your-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-borders-around-your-elements.russian.md
index 40638b9618..b87689346f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-borders-around-your-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-borders-around-your-elements.russian.md
@@ -2,32 +2,36 @@
id: bad87fee1348bd9bedf08813
title: Add Borders Around Your Elements
challengeType: 0
-videoUrl: ''
-
+videoUrl: https://scrimba.com/c/c2MvnHZ
+forumTopicId: 16630
localeTitle: Добавьте рамки вокруг ваших элементов
---
## Description
- Рамки в CSS имеют такие свойства, как style , color и width Например, если бы мы хотели создать сплошную красную рамку с шириной 5 пикселей вокруг элемента HTML, мы могли бы использовать этот класс:
+
+Рамки в CSS имеют такие свойства, как style , color и width Например, если бы мы хотели создать сплошную красную рамку с шириной 5 пикселей вокруг элемента HTML, мы могли бы использовать этот класс:
+
## Instructions
- Создайте класс под названием « thick-green-border . Этот класс должен добавить сплошную зелёную рамку шириной 10px вокруг элемента HTML. Примените этот класс к фотографии вашего кота. Помните, что вы можете применять несколько классов к элементу с помощью его атрибута class, вставляя пробелы между классами. Например: <img class="class1 class2">
+
+Создайте класс под названием « thick-green-border . Этот класс должен добавить сплошную зелёную рамку шириной 10px вокруг элемента HTML. Примените этот класс к фотографии вашего кота. Помните, что вы можете применять несколько классов к элементу с помощью его атрибута class, вставляя пробелы между классами. Например: <img class="class1 class2">
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert($("img").hasClass("smaller-image"), "Your img element should have the class smaller-image.");'
- - text: Ваш элемент img должен обладать классом thick-green-border .
- testString: 'assert($("img").hasClass("thick-green-border"), "Your img element should have the class thick-green-border.");'
- - text: Задайте вашему изображению ширину границы 10px .
- testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, "Give your image a border width of 10px.");'
- - text: Задайте вашему изображению стиль границы solid .
- testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of solid.");'
- - text: Граница вокруг вашего элемента img должна быть зеленой.
- testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your img element should be green.");'
+ - text: Your img element should have the class smaller-image.
+ testString: assert($("img").hasClass("smaller-image"));
+ - text: Your img element should have the class thick-green-border.
+ testString: assert($("img").hasClass("thick-green-border"));
+ - text: Give your image a border width of 10px.
+ testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12);
+ - text: Give your image a border style of solid.
+ testString: assert($("img").css("border-right-style") === "solid");
+ - text: The border around your img element should be green.
+ testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)");
```
@@ -95,14 +99,69 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.russian.md
index ea35f2e69f..e24cf7fb7f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.russian.md
@@ -2,29 +2,34 @@
id: bad87fee1248bd9aedf08824
title: Add Different Margins to Each Side of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cg4RWh4
+forumTopicId: 16633
localeTitle: Добавление разных полей в каждую сторону элемента
---
## Description
- Иногда вам нужно настроить элемент таким образом, чтобы он имел разный margin на каждой из сторон. CSS позволяет вам контролировать margin всех четырех отдельных сторон элемента с параметрами margin-top , margin-right , margin-bottom и margin-left .
+
+Иногда вам нужно настроить элемент таким образом, чтобы он имел разный margin на каждой из сторон. CSS позволяет вам контролировать margin всех четырех отдельных сторон элемента с параметрами margin-top , margin-right , margin-bottom и margin-left .
+
## Instructions
- Дайте синей коробке margin40px на ее верхней и левой стороне, но только 20px на нижней и правой стороне.
+
+Дайте синей коробке margin40px на ее верхней и левой стороне, но только 20px на нижней и правой стороне.
+
## Tests
```yml
tests:
- - text: Ваш blue-box класс должен дать верхнюю часть элементов 40px из margin .
- testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your blue-box class should give the top of elements 40px of margin.");'
- - text: Ваш класс blue-box должен предоставить право элементов 20pxmargin .
- testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your blue-box class should give the right of elements 20px of margin.");'
- - text: Ваш класс с blue-box должен дать нижнюю часть 20pxmargin .
- testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your blue-box class should give the bottom of elements 20px of margin.");'
- - text: Ваш класс с blue-box должен оставить слева от элементов 40pxmargin .
- testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your blue-box class should give the left of elements 40px of margin.");'
+ - text: Your blue-box class should give the top of elements 40px of margin.
+ testString: assert($(".blue-box").css("margin-top") === "40px");
+ - text: Your blue-box class should give the right of elements 20px of margin.
+ testString: assert($(".blue-box").css("margin-right") === "20px");
+ - text: Your blue-box class should give the bottom of elements 20px of margin.
+ testString: assert($(".blue-box").css("margin-bottom") === "20px");
+ - text: Your blue-box class should give the left of elements 40px of margin.
+ testString: assert($(".blue-box").css("margin-left") === "40px");
```
@@ -79,14 +84,54 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
margin
+
+
+
padding
+
padding
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.russian.md
index ccb8a9a9c1..bd5002467b 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.russian.md
@@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf08824
title: Add Different Padding to Each Side of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cB7mwUw
+forumTopicId: 16634
localeTitle: Добавьте разные внутренние отступы к каждой стороне элемента
---
## Description
- Иногда вам нужно настроить элемент таким образом, чтобы на каждой его стороне было различное количество внутренних отступов - padding . CSS позволяет вам управлять padding всех четырех отдельных сторон элемента с помощью свойств padding-top , padding-right , padding-bottom и padding-left .
+
+Иногда вам нужно настроить элемент таким образом, чтобы на каждой его стороне было различное количество внутренних отступов - padding . CSS позволяет вам управлять padding всех четырех отдельных сторон элемента с помощью свойств padding-top , padding-right , padding-bottom и padding-left .
+
## Instructions
- Задайте синему квадрату padding40px на его верхней и левой стороне, но только 20px на его нижней и правой стороне.
+
+Задайте синему квадрату padding40px на его верхней и левой стороне, но только 20px на его нижней и правой стороне.
+
## Tests
```yml
tests:
- - text: Ваш класс blue-box должен содержать padding сверху 40px.
- testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your blue-box class should give the top of the elements 40px of padding.");'
- - text: Ваш класс blue-box должен содержать padding справа 20px.
- testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your blue-box class should give the right of the elements 20px of padding.");'
- - text: Ваш класс blue-box должен содержать padding снизу 20px.
- testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your blue-box class should give the bottom of the elements 20px of padding.");'
- - text: Ваш класс blue-box должен содержать padding слева 40px.
- testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your blue-box class should give the left of the elements 40px of padding.");'
+ - text: Your blue-box class should give the top of the elements 40px of padding.
+ testString: assert($(".blue-box").css("padding-top") === "40px");
+ - text: Your blue-box class should give the right of the elements 20px of padding.
+ testString: assert($(".blue-box").css("padding-right") === "20px");
+ - text: Your blue-box class should give the bottom of the elements 20px of padding.
+ testString: assert($(".blue-box").css("padding-bottom") === "20px");
+ - text: Your blue-box class should give the left of the elements 40px of padding.
+ testString: assert($(".blue-box").css("padding-left") === "40px");
```
@@ -79,14 +84,54 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
margin
+
+
+
padding
+
padding
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.russian.md
index b8384dca68..91dc16c198 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.russian.md
@@ -2,25 +2,30 @@
id: bad87fee1348bd9aedf08814
title: Add Rounded Corners with border-radius
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cbZm2hg
+forumTopicId: 16649
localeTitle: Добавить закругленные углы при помощи свойства border-radius
---
## Description
- Ваша фотография кошки в настоящее время имеет острые углы. Мы можем скруглить эти углы с помощью CSS-свойства, называемого border-radius .
+
+Ваша фотография кошки в настоящее время имеет острые углы. Мы можем скруглить эти углы с помощью CSS-свойства, называемого border-radius .
+
## Instructions
- Вы можете указать border-radius в пикселях. Задайте вашей фотографии кошки border-radius10px . Примечание: эта задача позволяет использовать несколько возможных решений. Например, вы можете добавить border-radius для .thick-green-border или класса .smaller-image .
+
+Вы можете указать border-radius в пикселях. Задайте вашей фотографии кошки border-radius10px . Примечание: эта задача позволяет использовать несколько возможных решений. Например, вы можете добавить border-radius для .thick-green-border или класса .smaller-image .
+
## Tests
```yml
tests:
- - text: Элемент изображения должен иметь класс «толсто-зеленая граница».
- testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
- - text: Ваше изображение должно иметь радиус границы 10px
- testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of 10px");'
+ - text: Your image element should have the class "thick-green-border".
+ testString: assert($("img").hasClass("thick-green-border"));
+ - text: Your image should have a border radius of 10px
+ testString: assert($("img").css("border-top-left-radius") === '10px' && $("img").css("border-top-right-radius") === '10px' && $("img").css("border-bottom-left-radius") === '10px' && $("img").css("border-bottom-right-radius") === '10px');
```
@@ -94,14 +99,70 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.russian.md
index c514c8728b..15741703cf 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.russian.md
@@ -2,23 +2,28 @@
id: bad87fee1348bd9aedf08822
title: Adjust the Margin of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cVJarHW
+forumTopicId: 16654
localeTitle: Отрегулируйте маржу элемента
---
## Description
- Элемент по margin контролирует объем пространства между элементом в border и окружающих элементами. Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красный ящик имеет больший margin чем синий квадрат, что делает его меньше. Когда вы увеличите margin синего margin , это увеличит расстояние между его границей и окружающими элементами.
+
+Элемент по margin контролирует объем пространства между элементом в border и окружающих элементами. Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красный ящик имеет больший margin чем синий квадрат, что делает его меньше. Когда вы увеличите margin синего margin , это увеличит расстояние между его границей и окружающими элементами.
+
## Instructions
- Измените margin синего квадрата так, чтобы он был красным.
+
+Измените margin синего квадрата так, чтобы он был красным.
+
## Tests
```yml
tests:
- - text: Ваш класс с blue-box должен давать элементы 20pxmargin .
- testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your blue-box class should give elements 20px of margin.");'
+ - text: Your blue-box class should give elements 20px of margin.
+ testString: assert($(".blue-box").css("margin-top") === "20px");
```
@@ -73,14 +78,50 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
margin
+
+
+
padding
+
padding
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.russian.md
index f3ecd6d05b..96a99645f7 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.russian.md
@@ -2,23 +2,28 @@
id: bad88fee1348bd9aedf08825
title: Adjust the Padding of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cED8ZC2
+forumTopicId: 301083
localeTitle: Отрегулируйте прокладку элемента
---
## Description
- Теперь давайте немного отложим наше приложение для фотоаппарата Cat, и узнаем больше о стилизации HTML. Возможно, вы это уже заметили, но все элементы HTML по существу представляют собой небольшие прямоугольники. Три важных свойства управляют пространством, которое окружает каждый элемент HTML: padding , margin и border . Элемент в padding контролирует объем пространства между содержимым элемента и его border . Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красное поле имеет больше padding чем синий. При увеличении синей коробке в padding , это увеличит расстояние ( padding ) между текстом и границей вокруг него.
+
+Теперь давайте немного отложим наше приложение для фотоаппарата Cat, и узнаем больше о стилизации HTML. Возможно, вы это уже заметили, но все элементы HTML по существу представляют собой небольшие прямоугольники. Три важных свойства управляют пространством, которое окружает каждый элемент HTML: padding , margin и border . Элемент в padding контролирует объем пространства между содержимым элемента и его border . Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красное поле имеет больше padding чем синий. При увеличении синей коробке в padding , это увеличит расстояние ( padding ) между текстом и границей вокруг него.
+
## Instructions
- Измените padding синего квадрата в соответствии с вашим красным полем.
+
+Измените padding синего квадрата в соответствии с вашим красным полем.
+
## Tests
```yml
tests:
- - text: Ваш класс blue-box должен давать элементы 20pxpadding .
- testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your blue-box class should give elements 20px of padding.");'
+ - text: Your blue-box class should give elements 20px of padding.
+ testString: assert($(".blue-box").css("padding-top") === "20px");
```
@@ -71,14 +76,48 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
margin
+
+
+
padding
+
padding
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.russian.md
index 7c995f96cd..230e896325 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.russian.md
@@ -2,25 +2,30 @@
id: 5a9d7286424fe3d0e10cad13
title: Attach a Fallback value to a CSS Variable
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c6bDNfp
+forumTopicId: 301084
localeTitle: Прикрепите значение возврата к переменной CSS
---
## Description
- При использовании переменной в качестве значения свойства CSS вы можете добавить резервное значение, которое ваш браузер вернет, если данная переменная недействительна. Примечание. Этот резерв не используется для повышения совместимости браузера, и он не будет работать в браузерах IE. Скорее, он используется, чтобы браузер отображал цвет, если он не может найти вашу переменную. Вот как вы это делаете:
фон: var (- пингвин-кожа, черный);
Это установит фон в черный, если ваша переменная не была установлена. Обратите внимание, что это может быть полезно для отладки.
+
+При использовании переменной в качестве значения свойства CSS вы можете добавить резервное значение, которое ваш браузер вернет, если данная переменная недействительна. Примечание. Этот резерв не используется для повышения совместимости браузера, и он не будет работать в браузерах IE. Скорее, он используется, чтобы браузер отображал цвет, если он не может найти вашу переменную. Вот как вы это делаете:
фон: var (- пингвин-кожа, черный);
Это установит фон в черный, если ваша переменная не была установлена. Обратите внимание, что это может быть полезно для отладки.
+
## Instructions
- Похоже, что существует проблема с переменными, .penguin-top в .penguin-top и .penguin-bottom . Вместо того, чтобы исправить опечатку, добавьте запасное значение black в свойство background.penguin-top и .penguin-bottom .
+
+Похоже, что существует проблема с переменными, .penguin-top в .penguin-top и .penguin-bottom . Вместо того, чтобы исправить опечатку, добавьте запасное значение black в свойство background.penguin-top и .penguin-bottom .
+
## Tests
```yml
tests:
- - text: Примените запасное значение black к свойству background класса penguin-top .
- testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of black to the background property of the penguin-top class.");'
- - text: Примените запасное значение black к свойству background класса penguin-bottom .
- testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of black to the background property of the penguin-bottom class.");'
+ - text: Apply the fallback value of black to the background property of the penguin-top class.
+ testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
+ - text: Apply the fallback value of black to the background property of the penguin-bottom class.
+ testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
```
@@ -241,14 +246,13 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}"
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/cascading-css-variables.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/cascading-css-variables.russian.md
index 643e5b67bf..8f63eebc6b 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/cascading-css-variables.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/cascading-css-variables.russian.md
@@ -7,10 +7,14 @@ localeTitle: Каскадные переменные CSS
---
## Description
- Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как каскадный . Из-за каскадирования переменные CSS часто определяются в корневом элементе. :root - это селектор псевдокласса , который соответствует корневому элементу документа, обычно элемент. Создав переменные в :root , они будут доступны по всему миру и могут быть доступны из любого другого селектора позже в таблице стилей.
+
+Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как каскадный . Из-за каскадирования переменные CSS часто определяются в корневом элементе. :root - это селектор псевдокласса , который соответствует корневому элементу документа, обычно элемент. Создав переменные в :root , они будут доступны по всему миру и могут быть доступны из любого другого селектора позже в таблице стилей.
+
## Instructions
- Определите переменную с именем --penguin-belly в селекторе :root и придайте ей значение pink . Затем вы можете увидеть, как значение будет каскадно вниз, чтобы изменить значение на розовый, где бы ни была эта переменная.
+
+Определите переменную с именем --penguin-belly в селекторе :root и придайте ей значение pink . Затем вы можете увидеть, как значение будет каскадно вниз, чтобы изменить значение на розовый, где бы ни была эта переменная.
+
## Tests
@@ -19,7 +23,6 @@ localeTitle: Каскадные переменные CSS
tests:
- text: 'объявите переменную --penguin-belly в :root и назначьте ее pink .'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the --penguin-belly variable in the :root and assign it to pink.");'
-
```
@@ -237,14 +240,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.russian.md
index 281b1bff10..cdd2ee463c 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.russian.md
@@ -2,23 +2,28 @@
id: 5a9d72a1424fe3d0e10cad15
title: Change a variable for a specific area
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cdRwbuW
+forumTopicId: 301085
localeTitle: Изменение переменной для определенной области
---
## Description
- Когда вы создаете переменные в :root они задают значение этой переменной для всей страницы. Вы можете переписать эти переменные, установив их снова в пределах определенного элемента.
+
+Когда вы создаете переменные в :root они задают значение этой переменной для всей страницы. Вы можете переписать эти переменные, установив их снова в пределах определенного элемента.
+
## Instructions
- Измените значение --penguin-belly на white в классе penguin .
+
+Измените значение --penguin-belly на white в классе penguin .
+
## Tests
```yml
tests:
- - text: Класс penguin должен переназначить переменную --penguin-belly на white .
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The penguin class should reassign the --penguin-belly variable to white.");'
+ - text: The penguin class should reassign the --penguin-belly variable to white.
+ testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
```
@@ -239,14 +244,13 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+var code = ".penguin {--penguin-belly: white;}"
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/change-the-color-of-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/change-the-color-of-text.russian.md
index d30d8b02c7..1b816b0d0c 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/change-the-color-of-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/change-the-color-of-text.russian.md
@@ -2,25 +2,32 @@
id: bad87fee1348bd9aedf08803
title: Change the Color of Text
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cRkVmSm
+forumTopicId: 16775
localeTitle: Изменение цвета текста
---
## Description
- Теперь давайте изменим цвет некоторых наших текстов. Мы можем сделать это, изменив style вашего элемента h2 . Свойство, отвечающее за цвет текста элемента, является свойством стиля color . Вот как вы можете задать цвет текста вашего элемента h2 синим: <h2 style="color: blue;">CatPhotoApp</h2> Обратите внимание, что хорошей практикой является прекращение объявлений в style inline с помощью ; ,
+
+Теперь давайте изменим цвет некоторых наших текстов. Мы можем сделать это, изменив style вашего элемента h2 . Свойство, отвечающее за цвет текста элемента, является свойством стиля color . Вот как вы можете задать цвет текста вашего элемента h2 синим: <h2 style="color: blue;">CatPhotoApp</h2> Обратите внимание, что хорошей практикой является прекращение объявлений в style inline с помощью ; ,
+
## Instructions
- Измените свой стиль элемента h2 так, чтобы его цвет текста был красным.
+
+Измените свой стиль элемента h2 так, чтобы его цвет текста был красным.
+
## Tests
```yml
tests:
- - text: Ваш элемент h2 должен быть красным.
- testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your h2 element should be red.");'
- - text: 'Ваше объявление style должно заканчиваться на ; ,'
- testString: 'assert(code.match(/\s*CatPhotoApp\s*<\/h2>/)," Your style declaration should end with a ; .");'
+ - text: Your h2 element should have a style declaration.
+ testString: assert($("h2").attr('style'));
+ - text: Your h2 element should be red.
+ testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
+ - text: Your style declaration should end with a ; .
+ testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
```
@@ -68,14 +75,43 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
## Instructions
- Внутри тега <style>, который уже содержит класс red-text, создайте правило для p элементов и установите font-size 16 пикселей ( 16px ).
+
+Внутри тега <style>, который уже содержит класс red-text, создайте правило для p элементов и установите font-size 16 пикселей ( 16px ).
+
## Tests
```yml
tests:
- - text: Между тегами style дайте p элементам font-size16px . Увеличение браузера и текста должно составлять 100%.
- testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.");'
+ - text: Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.
+ testString: assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
```
@@ -72,14 +77,52 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/create-a-custom-css-variable.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/create-a-custom-css-variable.russian.md
index b02584c20d..68e090f3ea 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/create-a-custom-css-variable.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/create-a-custom-css-variable.russian.md
@@ -2,23 +2,28 @@
id: 5a9d726c424fe3d0e10cad11
title: Create a custom CSS Variable
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cQd27Hr
+forumTopicId: 301086
localeTitle: Создание пользовательской переменной CSS
---
## Description
- Чтобы создать переменную CSS, вам просто нужно дать ей name с two dashes перед ним и присвоить ему value подобное этому:
- пингвин-кожа: серый;
Это создаст переменную с именем --penguin-skin и присвоит ей значение gray . Теперь вы можете использовать эту переменную в другом месте вашего CSS, чтобы изменить значение других элементов на серый.
+
+Чтобы создать переменную CSS, вам просто нужно дать ей name с two dashes перед ним и присвоить ему value подобное этому:
- пингвин-кожа: серый;
Это создаст переменную с именем --penguin-skin и присвоит ей значение gray . Теперь вы можете использовать эту переменную в другом месте вашего CSS, чтобы изменить значение других элементов на серый.
+
## Instructions
- В классе penguin создайте переменное имя --penguin-skin и придайте ему значение gray
+
+В классе penguin создайте переменное имя --penguin-skin и придайте ему значение gray
+
## Tests
```yml
tests:
- - text: класс penguin должен объявить переменную --penguin-skin и назначить ее gray .
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "penguin class should declare the --penguin-skin variable and assign it to gray.");'
+ - text: penguin class should declare the --penguin-skin variable and assign it to gray.
+ testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
```
@@ -232,14 +237,13 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+var code = ".penguin {--penguin-skin: gray;}"
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.russian.md
index 670dc8e681..bcfc54b7a1 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.russian.md
@@ -2,27 +2,32 @@
id: bad87fed1348bd9aede07836
title: Give a Background Color to a div Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cdRKMCk
+forumTopicId: 18190
localeTitle: Задайте цвет фона элементу div
---
## Description
- Вы можете установить цвет фона элемента при помощи свойства background-color . Например, если вы хотите, чтобы цвет фона элемента был green , вы должны поместить его в элемент style :
.green-background { background-color: green; }
+
+Вы можете установить цвет фона элемента при помощи свойства background-color . Например, если вы хотите, чтобы цвет фона элемента был green , вы должны поместить его в элемент style :
.green-background { background-color: green; }
+
## Instructions
- Создайте класс с именем silver-background с background-color и присвойте ему значение silver. Назначьте этот класс вашему элементу div .
+
+Создайте класс с именем silver-background с background-color и присвойте ему значение silver. Назначьте этот класс вашему элементу div .
+
## Tests
```yml
tests:
- - text: Дайте вашему элементу div класс silver-background .
- testString: 'assert($("div").hasClass("silver-background"), "Give your div element the class silver-background.");'
- - text: Ваш элемент div должен иметь серебряный фон.
- testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your div element should have a silver background.");'
- - text: Определите класс с именем silver-background в элементе style и присвойте значение silver свойству background-color .
- testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "Define a class named silver-background within the style element and assign the value of silver to the background-color property.");'
+ - text: Give your div element the class silver-background.
+ testString: assert($("div").hasClass("silver-background"));
+ - text: Your div element should have a silver background.
+ testString: assert($("div").css("background-color") === "rgb(192, 192, 192)");
+ - text: Define a class named silver-background within the style element and assign the value of silver to the background-color property.
+ testString: assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
```
@@ -97,14 +102,74 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/import-a-google-font.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/import-a-google-font.russian.md
index 0409d9c0b1..2adfff7313 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/import-a-google-font.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/import-a-google-font.russian.md
@@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf08807
title: Import a Google Font
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cM9MRsJ
+forumTopicId: 18200
localeTitle: Импорт шрифта Google
---
## Description
- В дополнение к общим шрифтам, которые можно найти в большинстве операционных систем, можно так же использовать нестандартные пользовательские веб-шрифты для использования на нашем веб-сайте. Существует множество источников веб-шрифтов, но в этом примере мы сосредоточимся на библиотеке Google Fonts. Google Fonts - бесплатная библиотека веб-шрифтов, которую вы можете использовать в своем CSS, ссылаясь на URL-адрес шрифта. Итак, давайте попробуем импортировать и применить шрифт из библиотеки Google (обратите внимание, что если Google заблокирован в вашей стране, вам нужно будет пропустить этот пример). Чтобы импортировать шрифт Google, вы можете скопировать шрифт(ы) из библиотеки Google Fonts и затем вставить его в свой HTML. Для этого примера мы импортируем шрифт Lobster. Скопируйте следующий фрагмент кода и вставьте его в верхнюю часть редактора кода (перед элементом style): <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> Теперь вы можете использовать шрифт Lobster в своем CSS, используя Lobster как FAMILY_NAME, как в следующем примере: font-family: FAMILY_NAME, GENERIC_NAME;, GENERIC_NAME необязателен и является резервным шрифтом, если другой указанный шрифт недоступен. Это будет рассматриваться в следующей задаче. Имена шрифтов чувствительны к регистру и должны быть указаны в кавычках, если в имени есть пробел. Например, вам нужны кавычки, чтобы использовать шрифт "Open Sans", но не для шрифта Lobster.
+
+В дополнение к общим шрифтам, которые можно найти в большинстве операционных систем, можно так же использовать нестандартные пользовательские веб-шрифты для использования на нашем веб-сайте. Существует множество источников веб-шрифтов, но в этом примере мы сосредоточимся на библиотеке Google Fonts. Google Fonts - бесплатная библиотека веб-шрифтов, которую вы можете использовать в своем CSS, ссылаясь на URL-адрес шрифта. Итак, давайте попробуем импортировать и применить шрифт из библиотеки Google (обратите внимание, что если Google заблокирован в вашей стране, вам нужно будет пропустить этот пример). Чтобы импортировать шрифт Google, вы можете скопировать шрифт(ы) из библиотеки Google Fonts и затем вставить его в свой HTML. Для этого примера мы импортируем шрифт Lobster. Скопируйте следующий фрагмент кода и вставьте его в верхнюю часть редактора кода (перед элементом style): <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> Теперь вы можете использовать шрифт Lobster в своем CSS, используя Lobster как FAMILY_NAME, как в следующем примере: font-family: FAMILY_NAME, GENERIC_NAME;, GENERIC_NAME необязателен и является резервным шрифтом, если другой указанный шрифт недоступен. Это будет рассматриваться в следующей задаче. Имена шрифтов чувствительны к регистру и должны быть указаны в кавычках, если в имени есть пробел. Например, вам нужны кавычки, чтобы использовать шрифт "Open Sans", но не для шрифта Lobster.
+
## Instructions
- Создайте правило CSS font-family шрифтов, которое использует шрифт Lobster, и убедитесь, что оно будет применено к вашему элементу h2.
+
+Создайте правило CSS font-family шрифтов, которое использует шрифт Lobster, и убедитесь, что оно будет применено к вашему элементу h2.
+
## Tests
```yml
tests:
- - text: Импортируйте шрифт Lobster .
- testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the Lobster font.");'
- - text: Ваш элемент h2 должен использовать шрифт Lobster .
- testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your h2 element should use the font Lobster.");'
- - text: С помощью селектора h2 CSS измените шрифт.
- testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an h2 CSS selector to change the font.");'
- - text: Ваш элемент p все равно должен использовать шрифт monospace .
- testString: 'assert($("p").css("font-family").match(/monospace/i), "Your p element should still use the font monospace.");'
+ - text: Import the Lobster font.
+ testString: assert(new RegExp("googleapis", "gi").test(code));
+ - text: Your h2 element should use the font Lobster.
+ testString: assert($("h2").css("font-family").match(/lobster/i));
+ - text: Use an h2 CSS selector to change the font.
+ testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));
+ - text: Your p element should still use the font monospace.
+ testString: assert($("p").css("font-family").match(/monospace/i));
```
@@ -83,14 +88,59 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.russian.md
index 4232c5fd3e..f54f5f67f4 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.russian.md
@@ -3,22 +3,27 @@ id: 5b7d72c338cd7e35b63f3e14
title: Improve Compatibility with Browser Fallbacks
challengeType: 0
videoUrl: ''
+forumTopicId: 301087
localeTitle: Улучшение совместимости с отказами браузера
---
## Description
- При работе с CSS вы, вероятно, столкнетесь с проблемами совместимости браузеров в какой-то момент. Вот почему важно обеспечить резервные копии браузера, чтобы избежать потенциальных проблем. Когда ваш браузер анализирует CSS веб-страницы, он игнорирует любые свойства, которые он не распознает или не поддерживает. Например, если вы используете переменную CSS для назначения цвета фона на сайте, Internet Explorer игнорирует цвет фона, поскольку он не поддерживает переменные CSS. В этом случае браузер будет использовать любое значение, которое он имеет для этого свойства. Если он не может найти какое-либо другое значение, установленное для этого свойства, оно вернется к значению по умолчанию, которое обычно не является идеальным. Это означает, что если вы хотите предоставить резервную копию браузера, это так же просто, как предоставить еще одно широко поддерживаемое значение непосредственно перед вашей декларацией. Таким образом, у более старого браузера есть что-то, на что можно положиться, в то время как более новый браузер будет просто интерпретировать любое объявление, которое позднее появится в каскаде.
+
+При работе с CSS вы, вероятно, столкнетесь с проблемами совместимости браузеров в какой-то момент. Вот почему важно обеспечить резервные копии браузера, чтобы избежать потенциальных проблем. Когда ваш браузер анализирует CSS веб-страницы, он игнорирует любые свойства, которые он не распознает или не поддерживает. Например, если вы используете переменную CSS для назначения цвета фона на сайте, Internet Explorer игнорирует цвет фона, поскольку он не поддерживает переменные CSS. В этом случае браузер будет использовать любое значение, которое он имеет для этого свойства. Если он не может найти какое-либо другое значение, установленное для этого свойства, оно вернется к значению по умолчанию, которое обычно не является идеальным. Это означает, что если вы хотите предоставить резервную копию браузера, это так же просто, как предоставить еще одно широко поддерживаемое значение непосредственно перед вашей декларацией. Таким образом, у более старого браузера есть что-то, на что можно положиться, в то время как более новый браузер будет просто интерпретировать любое объявление, которое позднее появится в каскаде.
+
## Instructions
- Похоже, что переменная используется для установки цвета фона класса .red-box . Давайте улучшим совместимость с браузером, добавив еще одно background объявление прямо перед существующим объявлением и установив его значение в красный цвет.
+
+Похоже, что переменная используется для установки цвета фона класса .red-box . Давайте улучшим совместимость с браузером, добавив еще одно background объявление прямо перед существующим объявлением и установив его значение в красный цвет.
+
## Tests
```yml
tests:
- - text: '.red-box должно включать .red-box с background установленным на красный, непосредственно перед существующей декларацией background .'
- testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your .red-box rule should include a fallback with the background set to red immediately before the existing background declaration.");'
+ - text: Your .red-box rule should include a fallback with the background set to red immediately before the existing background declaration.
+ testString: assert(code.replace(/\s/g, "").match(/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi));
```
@@ -47,14 +52,24 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.russian.md
index 1100d9152c..48568e5129 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.russian.md
@@ -2,35 +2,40 @@
id: bad87fee1348bd9aedf08746
title: Inherit Styles from the Body Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c9bmdtR
+forumTopicId: 18204
localeTitle: Наследовать стили из элемента тела
---
## Description
- Теперь мы доказали, что каждая HTML-страница имеет элемент body , а ее элемент body также может быть связан с CSS. Помните, вы можете стилизовать свой элемент body же, как любой другой элемент HTML, и все ваши другие элементы наследуют стили вашего body .
+
+Теперь мы доказали, что каждая HTML-страница имеет элемент body , а ее элемент body также может быть связан с CSS. Помните, вы можете стилизовать свой элемент body же, как любой другой элемент HTML, и все ваши другие элементы наследуют стили вашего body .
+
## Instructions
- Во-первых, создайте элемент h1 с текстом Hello World Затем дадим все элементы на вашей странице цвета green , добавив color: green; к объявлению стиля вашего body . Наконец, придайте вашему body элемент семейства шрифтов monospace , добавив font-family: monospace; к объявлению стиля вашего body .
+
+Во-первых, создайте элемент h1 с текстом Hello World Затем дадим все элементы на вашей странице цвета green , добавив color: green; к объявлению стиля вашего body . Наконец, придайте вашему body элемент семейства шрифтов monospace , добавив font-family: monospace; к объявлению стиля вашего body .
+
## Tests
```yml
tests:
- - text: Создайте элемент h1 .
- testString: 'assert(($("h1").length > 0), "Create an h1 element.");'
- - text: Ваш элемент h1 должен иметь текст Hello World .
- testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your h1 element should have the text Hello World.");'
- - text: 'Убедитесь, что ваш элемент h1 имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/h1>/g) && code.match(/
/g).length === code.match(/
h1 element has a closing tag.");'
- - text: Дайте элементу своего body свойство colorgreen .
- testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your body element the color property of green.");'
- - text: Дайте вашему элементу body свойство font-familymonospace .
- testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your body element the font-family property of monospace.");'
- - text: Ваш элемент h1 должен наследовать шрифт monospace от вашего элемента body .
- testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your h1 element should inherit the font monospace from your body element.");'
- - text: Ваш элемент h1 должен наследовать зеленый цвет от вашего элемента body .
- testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your h1 element should inherit the color green from your body element.");'
+ - text: Create an h1 element.
+ testString: assert(($("h1").length > 0));
+ - text: Your h1 element should have the text Hello World.
+ testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
+ - text: Make sure your h1 element has a closing tag.
+ testString: assert(code.match(/<\/h1>/g) && code.match(/
/g).length === code.match(/
body element the color property of green.
+ testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
+ - text: Give your body element the font-family property of monospace.
+ testString: assert(($("body").css("font-family").match(/monospace/i)));
+ - text: Your h1 element should inherit the font monospace from your body element.
+ testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
+ - text: Your h1 element should inherit the color green from your body element.
+ testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"));
```
@@ -53,14 +58,21 @@ tests:
-
-
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.russian.md
index 87b90bebbb..abfa962d68 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.russian.md
@@ -2,25 +2,30 @@
id: bad87fee1348bd9aedf08815
title: Make Circular Images with a border-radius
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c2MvrcB
+forumTopicId: 18229
localeTitle: Создание изображения формы - круг с помощью border-radius
---
## Description
-В дополнение к пикселям вы также можете задать border-radius в процентном соотношении.
+
+В дополнение к пикселям вы также можете задать border-radius в процентном соотношении.
+
## Instructions
- Задайте вашей фотографии кошки border-radius50% .
+
+Задайте вашей фотографии кошки border-radius50% .
+
## Tests
```yml
tests:
- - text: 'Ваше изображение должно иметь радиус границы 50% , что делает его идеально круглым.'
- testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Ваше изображение должно иметь радиус границы 50% , что делает его идеально круглым.");'
- - text: 'Обязательно используйте процентное объявление 50%.'
- testString: 'assert(code.match(/50%/g), "Обязательно используйте процентное объявление 50%.");'
+ - text: Your image should have a border radius of 50%, making it perfectly circular.
+ testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
+ - text: Be sure to use a percentage value of 50%.
+ testString: assert(code.match(/50%/g));
```
@@ -95,14 +100,71 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.russian.md
index 86772d7652..4837a5c234 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.russian.md
@@ -2,33 +2,38 @@
id: bad87fee1348bd9aedf07756
title: Override All Other Styles by using Important
challengeType: 0
-videoUrl: ''
-localeTitle: 'Переопределите все остальные стили, используя важные'
+videoUrl: https://scrimba.com/c/cm24rcp
+forumTopicId: 18249
+localeTitle: Переопределите все остальные стили, используя важные
---
## Description
- Ура! Мы просто доказали, что встроенные стили переопределяют все объявления CSS в вашем элементе style . Но ждать. Есть один последний способ переопределить CSS. Это самый мощный метод для всех. Но прежде чем мы это сделаем, давайте поговорим о том, почему вы хотели бы переопределить CSS. Во многих ситуациях вы будете использовать библиотеки CSS. Они могут случайно переопределить ваш собственный CSS. Поэтому, когда вам абсолютно необходимо убедиться, что элемент имеет определенный CSS, вы можете использовать !important Давайте вернемся к нашему объявлению класса pink-text . Помните, что наш класс pink-text был переопределен последующими объявлениями классов, декларациями id и встроенными стилями.
+
+Ура! Мы просто доказали, что встроенные стили переопределяют все объявления CSS в вашем элементе style . Но ждать. Есть один последний способ переопределить CSS. Это самый мощный метод для всех. Но прежде чем мы это сделаем, давайте поговорим о том, почему вы хотели бы переопределить CSS. Во многих ситуациях вы будете использовать библиотеки CSS. Они могут случайно переопределить ваш собственный CSS. Поэтому, когда вам абсолютно необходимо убедиться, что элемент имеет определенный CSS, вы можете использовать !important Давайте вернемся к нашему объявлению класса pink-text . Помните, что наш класс pink-text был переопределен последующими объявлениями классов, декларациями id и встроенными стилями.
+
## Instructions
- Давайте добавим ключевое слово !important для вашего объявления цвета вашего розового текста, чтобы 100% убедиться, что ваш элемент h1 будет розовым. Пример того, как это сделать: color: red !important;
+
+Давайте добавим ключевое слово !important для вашего объявления цвета вашего розового текста, чтобы 100% убедиться, что ваш элемент h1 будет розовым. Пример того, как это сделать: color: red !important;
+
## Tests
```yml
tests:
- - text: Ваш элемент h1 должен иметь класс pink-text .
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: Ваш элемент h1 должен иметь blue-text .
- testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");'
- - text: Ваш элемент h1 должен иметь идентификатор orange-text .
- testString: 'assert($("h1").attr("id") === "orange-text", "Your h1 element should have the id of orange-text.");'
- - text: 'Ваш элемент h1 должен иметь встроенный стиль color: white .'
- testString: 'assert(code.match(/h1 element should have the inline style of color: white.");'
- - text: 'В объявлении класса pink-text должно быть ключевое слово !important Important, чтобы переопределить все другие объявления.'
- testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your pink-text class declaration should have the !important keyword to override all other declarations.");'
- - text: Ваш элемент h1 должен быть розовым.
- testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your h1 element should be pink.");'
+ - text: Your h1 element should have the class pink-text.
+ testString: assert($("h1").hasClass("pink-text"));
+ - text: Your h1 element should have the class blue-text.
+ testString: assert($("h1").hasClass("blue-text"));
+ - text: Your h1 element should have the id of orange-text.
+ testString: assert($("h1").attr("id") === "orange-text");
+ - text: Your h1 element should have the inline style of color: white.
+ testString: assert(code.match(/pink-text class declaration should have the !important keyword to override all other declarations.
+ testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));
+ - text: Your h1 element should be pink.
+ testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
```
@@ -62,14 +67,29 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
Hello World!
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.russian.md
index c8487d6d46..d2540249c4 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.russian.md
@@ -2,35 +2,40 @@
id: bad87fee1348bd8aedf06756
title: Override Class Declarations by Styling ID Attributes
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cRkpDhB
+forumTopicId: 18251
localeTitle: Переопределить объявления классов с помощью атрибутов идентификатора стилизации
---
## Description
- Мы просто доказали, что браузеры читают CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать любую декларацию CSS. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с pink-text и blue-text и сделаем ваш элемент h1 оранжевым, предоставив элементу h1 идентификатор, а затем стиль этого идентификатора.
+
+Мы просто доказали, что браузеры читают CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать любую декларацию CSS. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с pink-text и blue-text и сделаем ваш элемент h1 оранжевым, предоставив элементу h1 идентификатор, а затем стиль этого идентификатора.
+
## Instructions
- Дайте элементу h1 атрибут idorange-text . Помните, что стили id выглядят следующим образом: <h1 id="orange-text"> Оставьте классы blue-text и pink-text на вашем элементе h1 . Создайте объявление CSS для вашего orange-text в элементе style . Вот пример того, как это выглядит:
# brown-text { коричневый цвет; }
Примечание. Неважно, объявляете ли вы этот CSS выше или ниже класса розового текста, поскольку атрибут id всегда будет иметь приоритет.
+
+Дайте элементу h1 атрибут idorange-text . Помните, что стили id выглядят следующим образом: <h1 id="orange-text"> Оставьте классы blue-text и pink-text на вашем элементе h1 . Создайте объявление CSS для вашего orange-text в элементе style . Вот пример того, как это выглядит:
# brown-text { коричневый цвет; }
Примечание. Неважно, объявляете ли вы этот CSS выше или ниже класса розового текста, поскольку атрибут id всегда будет иметь приоритет.
+
## Tests
```yml
tests:
- - text: Ваш элемент h1 должен иметь класс pink-text .
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: Ваш элемент h1 должен иметь blue-text .
- testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");'
- - text: Дайте элементу h1 идентификатор orange-text .
- testString: 'assert($("h1").attr("id") === "orange-text", "Give your h1 element the id of orange-text.");'
- - text: Должен быть только один элемент h1 .
- testString: 'assert(($("h1").length === 1), "There should be only one h1 element.");'
- - text: Создайте объявление CSS для вашего идентификатора orange-text
- testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your orange-text id");'
- - text: Не h1 никаких атрибутов style .
- testString: 'assert(!code.match(//gi), "Do not give your h1 any style attributes.");'
- - text: Ваш элемент h1 должен быть оранжевым.
- testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your h1 element should be orange.");'
+ - text: Your h1 element should have the class pink-text.
+ testString: assert($("h1").hasClass("pink-text"));
+ - text: Your h1 element should have the class blue-text.
+ testString: assert($("h1").hasClass("blue-text"));
+ - text: Give your h1 element the id of orange-text.
+ testString: assert($("h1").attr("id") === "orange-text");
+ - text: There should be only one h1 element.
+ testString: assert(($("h1").length === 1));
+ - text: Create a CSS declaration for your orange-text id
+ testString: assert(code.match(/#orange-text\s*{/gi));
+ - text: Do not give your h1 any style attributes.
+ testString: assert(!code.match(//gi));
+ - text: Your h1 element should be orange.
+ testString: assert($("h1").css("color") === "rgb(255, 165, 0)");
```
@@ -61,14 +66,29 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
Hello World!
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.russian.md
index 3ddb62ab83..7e20ba156b 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.russian.md
@@ -2,31 +2,36 @@
id: bad87fee1348bd9aedf06756
title: Override Class Declarations with Inline Styles
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cGJDRha
+forumTopicId: 18252
localeTitle: Переопределить объявления классов со встроенными стилями
---
## Description
- Таким образом, мы доказали, что объявления id переопределяют объявления классов, независимо от того, где они объявлены в вашем элементе style CSS. Существуют и другие способы переопределения CSS. Вы помните встроенные стили?
+
+Таким образом, мы доказали, что объявления id переопределяют объявления классов, независимо от того, где они объявлены в вашем элементе style CSS. Существуют и другие способы переопределения CSS. Вы помните встроенные стили?
+
## Instructions
- Используйте inline style чтобы сделать наш элемент h1 белым. Помните, что в стилях строк выглядит так: <h1 style="color: green;"> Оставьте классы blue-text и pink-text на вашем элементе h1 .
+
+Используйте inline style чтобы сделать наш элемент h1 белым. Помните, что в стилях строк выглядит так: <h1 style="color: green;"> Оставьте классы blue-text и pink-text на вашем элементе h1 .
+
## Tests
```yml
tests:
- - text: Ваш элемент h1 должен иметь класс pink-text .
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: Ваш элемент h1 должен иметь blue-text .
- testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");'
- - text: Ваш элемент h1 должен иметь идентификатор orange-text .
- testString: 'assert($("h1").attr("id") === "orange-text", "Your h1 element should have the id of orange-text.");'
- - text: Дайте вашему элементу h1 встроенный стиль.
- testString: 'assert(document.querySelector("h1[style]"), "Give your h1 element an inline style.");'
- - text: Ваш элемент h1 должен быть белым.
- testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your h1 element should be white.");'
+ - text: Your h1 element should have the class pink-text.
+ testString: assert($("h1").hasClass("pink-text"));
+ - text: Your h1 element should have the class blue-text.
+ testString: assert($("h1").hasClass("blue-text"));
+ - text: Your h1 element should have the id of orange-text.
+ testString: assert($("h1").attr("id") === "orange-text");
+ - text: Give your h1 element an inline style.
+ testString: assert(document.querySelector('h1[style]'));
+ - text: Your h1 element should be white.
+ testString: assert($("h1").css("color") === "rgb(255, 255, 255)");
```
@@ -60,14 +65,29 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
Hello World!
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.russian.md
index b5735dee77..255785e4f6 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.russian.md
@@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf04756
title: Override Styles in Subsequent CSS
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cGJDQug
+forumTopicId: 18253
localeTitle: Переопределить стили, записав их ниже в последующем CSS
---
## Description
- Наш класс pink-text переопределил декларацию CSS в body элементе! Мы просто доказали, что наши классы переопределяют CSS элемента body . Итак, следующий логический вопрос: что мы можем сделать, чтобы переопределить наш класс pink-text ?
+
+Наш класс pink-text переопределил декларацию CSS в body элементе! Мы просто доказали, что наши классы переопределяют CSS элемента body . Итак, следующий логический вопрос: что мы можем сделать, чтобы переопределить наш класс pink-text ?
+
## Instructions
- Создайте дополнительный класс CSS blue-text, который задает элементу синий цвет. Убедитесь, что оно ниже вашего объявления класса pink-text. Примените класс blue-text к вашему элементу h1 в дополнение к вашему классу pink-text, и давайте посмотрим, какой из них выиграет. Применение нескольких атрибутов класса к элементу HTML выполняется с пространством между ними следующим образом: class="class1 class2" Примечание. Не имеет значения, какой порядок классов указан в элементе HTML. Тем не менее, порядок объявлений class в разделе <style> - это то, что важно. Вторая декларация всегда будет иметь приоритет над первой. Поскольку .blue-text объявлен вторым, он переопределяет атрибуты .pink-text
+
+Создайте дополнительный класс CSS blue-text, который задает элементу синий цвет. Убедитесь, что оно ниже вашего объявления класса pink-text. Примените класс blue-text к вашему элементу h1 в дополнение к вашему классу pink-text, и давайте посмотрим, какой из них выиграет. Применение нескольких атрибутов класса к элементу HTML выполняется с пространством между ними следующим образом: class="class1 class2" Примечание. Не имеет значения, какой порядок классов указан в элементе HTML. Тем не менее, порядок объявлений class в разделе <style> - это то, что важно. Вторая декларация всегда будет иметь приоритет над первой. Поскольку .blue-text объявлен вторым, он переопределяет атрибуты .pink-text
+
## Tests
```yml
tests:
- - text: Ваш элемент h1 должен иметь класс pink-text .
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: Ваш элемент h1 должен иметь blue-text .
- testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");'
- - text: И blue-text и pink-text должны принадлежать одному и тому же элементу h1 .
- testString: 'assert($(".pink-text").hasClass("blue-text"), "Both blue-text and pink-text should belong to the same h1 element.");'
- - text: Ваш элемент h1 должен быть синим.
- testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your h1 element should be blue.");'
+ - text: Your h1 element should have the class pink-text.
+ testString: assert($("h1").hasClass("pink-text"));
+ - text: Your h1 element should have the class blue-text.
+ testString: assert($("h1").hasClass("blue-text"));
+ - text: Both blue-text and pink-text should belong to the same h1 element.
+ testString: assert($(".pink-text").hasClass("blue-text"));
+ - text: Your h1 element should be blue.
+ testString: assert($("h1").css("color") === "rgb(0, 0, 255)");
```
@@ -52,14 +57,27 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
Hello World!
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/prioritize-one-style-over-another.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/prioritize-one-style-over-another.russian.md
index 76d7c32127..178d1961d5 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/prioritize-one-style-over-another.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/prioritize-one-style-over-another.russian.md
@@ -2,27 +2,32 @@
id: bad87fee1348bd9aedf08756
title: Prioritize One Style Over Another
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cZ8wnHv
+forumTopicId: 18258
localeTitle: Приоритет одного стиля над другим
---
## Description
- Иногда ваши HTML-элементы получат несколько стилей, которые конфликтуют друг с другом. Например, ваш элемент h1 не может быть одновременно зеленым и розовым. Давайте посмотрим, что произойдет, когда мы создадим класс, который делает текст розовым, а затем примените его к элементу. Будет ли наш класс переопределятьcolor: green; элемента bodycolor: green; Свойство CSS?
+
+Иногда ваши HTML-элементы получат несколько стилей, которые конфликтуют друг с другом. Например, ваш элемент h1 не может быть одновременно зеленым и розовым. Давайте посмотрим, что произойдет, когда мы создадим класс, который делает текст розовым, а затем примените его к элементу. Будет ли наш класс переопределятьcolor: green; элемента bodycolor: green; Свойство CSS?
+
## Instructions
- Создайте класс CSS, называемый pink-text который дает элементу цвет розовый. Дайте вашему элементу h1 класс pink-text .
+
+Создайте класс CSS, называемый pink-text который дает элементу цвет розовый. Дайте вашему элементу h1 класс pink-text .
+
## Tests
```yml
tests:
- - text: Ваш элемент h1 должен иметь класс pink-text .
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: Ваш <style> должен иметь класс CSS с pink-text который изменяет color .
- testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <style> should have a pink-text CSS class that changes the color.");'
- - text: Ваш элемент h1 должен быть розовым.
- testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your h1 element should be pink.");'
+ - text: Your h1 element should have the class pink-text.
+ testString: assert($("h1").hasClass("pink-text"));
+ - text: Your <style> should have a pink-text CSS class that changes the color.
+ testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
+ - text: Your h1 element should be pink.
+ testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
```
@@ -47,14 +52,23 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
Hello World!
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.russian.md
index 4ced765a59..e2f55de4a5 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.russian.md
@@ -2,23 +2,28 @@
id: bad87fee1348bd9aede08807
title: Set the Font Family of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c3bvpCg
+forumTopicId: 18278
localeTitle: Изменение семейства шрифтов элемента
---
## Description
- Вы можете выбрать, какой шрифт должен использовать элемент, используя свойство font-family . Например, если вы хотите чтобы шрифтом элемента h2 был шрифт под названием sans-serif, то вы должны использовать следующий CSS:
h2 { font-family: sans-serif; }
+
+Вы можете выбрать, какой шрифт должен использовать элемент, используя свойство font-family . Например, если вы хотите чтобы шрифтом элемента h2 был шрифт под названием sans-serif, то вы должны использовать следующий CSS:
h2 { font-family: sans-serif; }
+
## Instructions
- Измените стиль всех p элементов данной программы на monospace.
+
+Измените стиль всех p элементов данной программы на monospace.
+
## Tests
```yml
tests:
- - text: Ваши элементы p должны использовать шрифт monospace .
- testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your p elements should use the font monospace.");'
+ - text: Your p elements should use the font monospace.
+ testString: assert($("p").not(".red-text").css("font-family").match(/monospace/i));
```
@@ -76,14 +81,54 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-id-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-id-of-an-element.russian.md
index f8fe04a016..2680ddd63c 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-id-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/set-the-id-of-an-element.russian.md
@@ -2,23 +2,28 @@
id: bad87eee1348bd9aede07836
title: Set the id of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cN6MEc2
+forumTopicId: 18279
localeTitle: Установите идентификатор элемента
---
## Description
- В дополнение к классам каждый элемент HTML также может иметь атрибут id . Существует несколько преимуществ использования атрибутов id: вы можете использовать id для стилизации одного элемента, а позже вы узнаете, что вы можете использовать их для выбора и изменения определенных элементов с помощью JavaScript. Атрибуты id должны быть уникальными. Браузеры не будут применять это, но это широко согласованная передовая практика. Поэтому, пожалуйста, не указывайте одного и того же значения для атрибута id . Вот пример того, как вы присваиваете элементу h2 идентификатор cat-photo-app : <h2 id="cat-photo-app">
+
+В дополнение к классам каждый элемент HTML также может иметь атрибут id . Существует несколько преимуществ использования атрибутов id: вы можете использовать id для стилизации одного элемента, а позже вы узнаете, что вы можете использовать их для выбора и изменения определенных элементов с помощью JavaScript. Атрибуты id должны быть уникальными. Браузеры не будут применять это, но это широко согласованная передовая практика. Поэтому, пожалуйста, не указывайте одного и того же значения для атрибута id . Вот пример того, как вы присваиваете элементу h2 идентификатор cat-photo-app : <h2 id="cat-photo-app">
+
## Instructions
- Задайте элементу form идентификатор cat-photo-form .
+
+Задайте элементу form идентификатор cat-photo-form .
+
## Tests
```yml
tests:
- - text: Дайте элементу form идентификатор cat-photo-form .
- testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your form element the id of cat-photo-form.");'
+ - text: Give your form element the id of cat-photo-form.
+ testString: assert($("form").attr("id") === "cat-photo-form");
```
@@ -97,14 +102,74 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/size-your-images.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/size-your-images.russian.md
index e902f908ae..a501146e5b 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/size-your-images.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/size-your-images.russian.md
@@ -2,25 +2,30 @@
id: bad87fee1348bd9acdf08812
title: Size Your Images
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cM9MmCP
+forumTopicId: 18282
localeTitle: Управляйте размером ваших изображений
---
## Description
- CSS имеет свойство под названием width, которое управляет шириной элемента. Как и в случае с шрифтами, мы будем использовать пиксели px (pixels), чтобы указать ширину изображения. Например, если мы хотим создать класс CSS с именем larger-image, который дал бы HTML-элементам ширину 500 пикселей, мы будем использовать:
<style> .larger-image { width: 500px; } </ style>
+
+CSS имеет свойство под названием width, которое управляет шириной элемента. Как и в случае с шрифтами, мы будем использовать пиксели px (pixels), чтобы указать ширину изображения. Например, если мы хотим создать класс CSS с именем larger-image, который дал бы HTML-элементам ширину 500 пикселей, мы будем использовать:
<style> .larger-image { width: 500px; } </ style>
+
## Instructions
- Создайте класс smaller-image и используйте его для изменения размера изображения, чтобы оно было всего 100 пикселей в ширину. Заметка Из-за различий в реализации браузера, вам может потребоваться 100% масштабирование для прохождения тестов в этом задании.
+
+Создайте класс smaller-image и используйте его для изменения размера изображения, чтобы оно было всего 100 пикселей в ширину. Заметка Из-за различий в реализации браузера, вам может потребоваться 100% масштабирование для прохождения тестов в этом задании.
+
## Tests
```yml
tests:
- - text: Ваш элемент img должен иметь класс smaller-image .
- testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your img element should have the class smaller-image.");'
- - text: Ваше изображение должно быть 100 пикселей в ширину. Увеличение браузера должно составлять 100%.
- testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
+ - text: Your img element should have the class smaller-image.
+ testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
+ - text: Your image should be 100 pixels wide. Browser zoom should be at 100%.
+ testString: assert($("img").width() === 100);
```
@@ -84,14 +89,63 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.russian.md
index 6b4e627118..d0b9b8eb09 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.russian.md
@@ -2,29 +2,34 @@
id: bad87fee1348bd9aedf08808
title: Specify How Fonts Should Degrade
challengeType: 0
-videoUrl: ''
-localeTitle: 'Укажите какие шрифты должны использоваться'
+videoUrl: https://scrimba.com/c/cpVKBfQ
+forumTopicId: 18304
+localeTitle: Укажите какие шрифты должны использоваться
---
## Description
- Существует несколько стандартных шрифтов, доступных во всех браузерах. Эти типовые семейства шрифтов включают в себя monospace , serif и sans-serif Когда один шрифт недоступен, вы можете сказать браузеру «использовать другой шрифт. Например, если вы хотите, чтобы элемент использовал шрифт Helvetica , но когда Helvetica недоступен использовался шрифт sans-serif, вы можете указать следующее:
p { font-family: Helvetica, sans-serif; }
Имена общих имен шрифтов не чувствительны к регистру. Кроме того, им не нужны кавычки, потому что они являются ключевыми словами CSS.
+
+Существует несколько стандартных шрифтов, доступных во всех браузерах. Эти типовые семейства шрифтов включают в себя monospace , serif и sans-serif Когда один шрифт недоступен, вы можете сказать браузеру «использовать другой шрифт. Например, если вы хотите, чтобы элемент использовал шрифт Helvetica , но когда Helvetica недоступен использовался шрифт sans-serif, вы можете указать следующее:
p { font-family: Helvetica, sans-serif; }
Имена общих имен шрифтов не чувствительны к регистру. Кроме того, им не нужны кавычки, потому что они являются ключевыми словами CSS.
+
## Instructions
- Для начала примените monospace шрифт к элементу h2 , так чтобы он имел два шрифта - Lobster и monospace . В последнем вызове вы импортировали шрифт Lobster используя тег link . Теперь закомментируйте импорт шрифта Lobster (используя HTML-комментарии, о которых вы узнали ранее) из Google Fonts, чтобы он больше не был доступен. Обратите внимание, как ваш элемент h2 может заменяться monospace шрифтом. Заметка Если на вашем компьютере установлен шрифт Lobster, вы не увидите замены шрифта, потому что ваш браузер сможет найти этот шрифт.
+
+Для начала примените monospace шрифт к элементу h2 , так чтобы он имел два шрифта - Lobster и monospace . В последнем вызове вы импортировали шрифт Lobster используя тег link . Теперь закомментируйте импорт шрифта Lobster (используя HTML-комментарии, о которых вы узнали ранее) из Google Fonts, чтобы он больше не был доступен. Обратите внимание, как ваш элемент h2 может заменяться monospace шрифтом. Заметка Если на вашем компьютере установлен шрифт Lobster, вы не увидите замены шрифта, потому что ваш браузер сможет найти этот шрифт.
+
## Tests
```yml
tests:
- - text: Ваш элемент h2 должен использовать шрифт Lobster .
- testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font Lobster.");'
- - text: 'Ваш h2-элемент должен деградировать до monospace шрифта, если Lobster недоступен.'
- testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font monospace when Lobster is not available.");'
- - text: 'Прокомментируйте свой звонок в Google для шрифта Lobster , поставив <!-- перед ним.'
- testString: 'assert(new RegExp("", "gi").test(code), "Be sure to close your comment by adding -->.");'
+ - text: Your h2 element should use the font Lobster.
+ testString: assert($("h2").css("font-family").match(/^"?lobster/i));
+ - text: Your h2 element should degrade to the font monospace when Lobster is not available.
+ testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(code));
+ - text: Comment out your call to Google for the Lobster font by putting <!-- in front of it.
+ testString: assert(new RegExp("", "gi").test(code));
```
@@ -88,14 +93,59 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.russian.md
index b0985e46d3..238c8cad64 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.russian.md
@@ -2,15 +2,19 @@
id: bad87fee1348bd9aefe08806
title: Style Multiple Elements with a CSS Class
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cRkVbsQ
+forumTopicId: 18311
localeTitle: Стиль нескольких элементов с классом CSS
---
## Description
- Классы позволяют использовать одни и те же стили CSS для нескольких элементов HTML. Вы можете увидеть это, применив свой класс red-text к первому элементу p .
+
+Классы позволяют использовать одни и те же стили CSS для нескольких элементов HTML. Вы можете увидеть это, применив свой класс red-text к первому элементу p .
+
## Instructions
-
+
+
## Tests
@@ -18,16 +22,16 @@ localeTitle: Стиль нескольких элементов с классо
```yml
tests:
- - text: Ваш элемент h2 должен быть красным.
- testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your h2 element should be red.");'
- - text: Ваш элемент h2 должен иметь red-text .
- testString: 'assert($("h2").hasClass("red-text"), "Your h2 element should have the class red-text.");'
- - text: Ваш первый элемент p должен быть красным.
- testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", "Your first p element should be red.");'
- - text: Ваш второй и третий элементы p не должны быть красными.
- testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), "Your second and third p elements should not be red.");'
- - text: Ваш первый элемент p должен иметь red-text класса.
- testString: 'assert($("p:eq(0)").hasClass("red-text"), "Your first p element should have the class red-text.");'
+ - text: Your h2 element should be red.
+ testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
+ - text: Your h2 element should have the class red-text.
+ testString: assert($("h2").hasClass("red-text"));
+ - text: Your first p element should be red.
+ testString: assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");
+ - text: Your second and third p elements should not be red.
+ testString: assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));
+ - text: Your first p element should have the class red-text.
+ testString: assert($("p:eq(0)").hasClass("red-text"));
```
@@ -81,14 +85,49 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/style-the-html-body-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/style-the-html-body-element.russian.md
index f9841a0aaa..a062c2b177 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/style-the-html-body-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/style-the-html-body-element.russian.md
@@ -2,27 +2,32 @@
id: bad87fee1348bd9aedf08736
title: Style the HTML Body Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cB77PHW
+forumTopicId: 18313
localeTitle: Стиль HTML-элемента body
---
## Description
- Теперь давайте поговорим о наследовании в CSS. На каждой странице HTML есть элемент body .
+
+Теперь давайте поговорим о наследовании в CSS. На каждой странице HTML есть элемент body .
+
## Instructions
- Мы можем доказать, что элемент body присутствует здесь, задавая ему черный background-color . Мы можем сделать это, добавив следующее к нашему style :
body { background-color: black; }
+
+Мы можем доказать, что элемент body присутствует здесь, задавая ему черный background-color . Мы можем сделать это, добавив следующее к нашему style :
body { background-color: black; }
+
## Tests
```yml
tests:
- - text: Дайте вашему body элемент background-color черного цвета.
- testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your body element the background-color of black.");'
- - text: 'Убедитесь, что правило CSS правильно отформатировано как с открывающимися, так и закрывающимися фигурными скобками.'
- testString: 'assert(code.match(/
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.russian.md
index 6d3f0d9a8b..d0d70b2cbf 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.russian.md
@@ -2,25 +2,30 @@
id: bad82fee1322bd9aedf08721
title: Understand Absolute versus Relative Units
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cN66JSL
+forumTopicId: 301089
localeTitle: Понимание разницы между абсолютными и относительными единицами
---
## Description
- В нескольких последних задачах вы задавали внутренние или внешние отступы элементов в пикселях ( px ). Пиксели - это тип единицы длины, что говорит браузеру о том, как размер или пространство элемента. В дополнение к px , CSS имеет несколько различных единиц измерения длины, которые вы можете использовать. Два основных типа единиц длины являются абсолютными и относительными. Абсолютные единицы привязываются к физическим единицам длины. Так , например, in и mm см дюймов и миллиметров, соответственно. Единицы абсолютной длины приближаются к фактическому измерению на экране, но есть некоторые различия в зависимости от разрешения экрана. Относительные единицы, такие как em или rem , относятся к другому значению длины. Например, em основывается на размере шрифта элемента. Если вы используете его для установки самого свойства font-size , оно относится к font-size родительского font-size . Заметка Существует несколько относительных параметров единицы, которые привязаны к размеру окна просмотра. Они описаны в разделе «Ревизионные принципы веб-дизайна».
+
+В нескольких последних задачах вы задавали внутренние или внешние отступы элементов в пикселях ( px ). Пиксели - это тип единицы длины, что говорит браузеру о том, как размер или пространство элемента. В дополнение к px , CSS имеет несколько различных единиц измерения длины, которые вы можете использовать. Два основных типа единиц длины являются абсолютными и относительными. Абсолютные единицы привязываются к физическим единицам длины. Так , например, in и mm см дюймов и миллиметров, соответственно. Единицы абсолютной длины приближаются к фактическому измерению на экране, но есть некоторые различия в зависимости от разрешения экрана. Относительные единицы, такие как em или rem , относятся к другому значению длины. Например, em основывается на размере шрифта элемента. Если вы используете его для установки самого свойства font-size , оно относится к font-size родительского font-size . Заметка Существует несколько относительных параметров единицы, которые привязаны к размеру окна просмотра. Они описаны в разделе «Ревизионные принципы веб-дизайна».
+
## Instructions
- Добавьте свойство padding к элементу с классом red-box и установите его значение в 1.5em .
+
+Добавьте свойство padding к элементу с классом red-box и установите его значение в 1.5em .
+
## Tests
```yml
tests:
- - text: Класс red-box должен иметь свойство padding .
- testString: 'assert($(".red-box").css("padding-top") != "0px" && $(".red-box").css("padding-right") != "0px" && $(".red-box").css("padding-bottom") != "0px" && $(".red-box").css("padding-left") != "0px", "Your red-box class should have a padding property.");'
- - text: Ваш red-box класс должен дать элементы 1.5em из padding .
- testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), "Your red-box class should give elements 1.5em of padding.");'
+ - text: Your red-box class should have a padding property.
+ testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px');
+ - text: Your red-box class should give elements 1.5em of padding.
+ testString: assert(code.match(/\.red-box\s*?{(\s|.)*?padding:\s*?1\.5em/gi));
```
@@ -72,14 +77,47 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
margin
+
+
+
padding
+
padding
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.russian.md
index 5e5d5642a0..5ed605f35a 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.russian.md
@@ -2,29 +2,34 @@
id: bad87fee1348bd9aecf08806
title: Use a CSS Class to Style an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c2MvDtV
+forumTopicId: 18337
localeTitle: Используйте селектор класса в CSS для стилизации элемента
---
## Description
- Классы - многоразовые стили, которые можно добавить к элементам HTML. Вот пример объявления класса CSS:
<style> .blue-text { color: blue; } </ style>
Вы можете видеть, что мы создали класс CSS, который назвали blue-text в <style> . Вы можете применить класс к HTML-элементу следующим образом: <h2 class="blue-text">CatPhotoApp</h2> Обратите внимание, что в элементе style CSS имена классов начинаются с точки. В атрибуте класса HTML-элементов имя класса не включает точку.
+
+Классы - многоразовые стили, которые можно добавить к элементам HTML. Вот пример объявления класса CSS:
<style> .blue-text { color: blue; } </ style>
Вы можете видеть, что мы создали класс CSS, который назвали blue-text в <style> . Вы можете применить класс к HTML-элементу следующим образом: <h2 class="blue-text">CatPhotoApp</h2> Обратите внимание, что в элементе style CSS имена классов начинаются с точки. В атрибуте класса HTML-элементов имя класса не включает точку.
+
## Instructions
- Внутри элемента style измените селектор h2 на .red-text и обновите значение цвета с blue на red . Задайте вашему элементу h2 атрибут class со значением 'red-text' .
+
+Внутри элемента style измените селектор h2 на .red-text и обновите значение цвета с blue на red . Задайте вашему элементу h2 атрибут class со значением 'red-text' .
+
## Tests
```yml
tests:
- - text: Ваш элемент h2 должен быть красным.
- testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your h2 element should be red.");'
- - text: Ваш элемент h2 должен иметь red-text .
- testString: 'assert($("h2").hasClass("red-text"), "Your h2 element should have the class red-text.");'
- - text: В вашей таблице стилей должен быть объявлен класс red-text и его цвет будет красным.
- testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a red-text class and have its color set to red.");'
- - text: 'Не используйте встроенные объявления стиля, такие как style="color: red" в вашем элементе h2 .'
- testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like style="color: red" in your h2 element.");'
+ - text: Your h2 element should be red.
+ testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
+ - text: Your h2 element should have the class red-text.
+ testString: assert($("h2").hasClass("red-text"));
+ - text: Your stylesheet should declare a red-text class and have its color set to red.
+ testString: assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
+ - text: Do not use inline style declarations like style="color: red" in your h2 element.
+ testString: assert($("h2").attr("style") === undefined);
```
@@ -78,14 +83,49 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-custom-css-variable.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-custom-css-variable.russian.md
index ae0d6f588a..4e6517f04f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-custom-css-variable.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-custom-css-variable.russian.md
@@ -2,29 +2,34 @@
id: 5a9d727a424fe3d0e10cad12
title: Use a custom CSS Variable
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cM989ck
+forumTopicId: 301090
localeTitle: Используйте настраиваемую переменную CSS
---
## Description
- После создания вашей переменной вы можете присвоить ее значение другим свойствам CSS, указав имя, которое вы ему дали.
фон: var (- пингвин-скин);
Это изменит фон любого элемента, на который вы нацеливаетесь, на серый, поскольку это значение переменной --penguin-skin . Обратите внимание: стили не будут применяться, если имена переменных не будут точно совпадать.
+
+После создания вашей переменной вы можете присвоить ее значение другим свойствам CSS, указав имя, которое вы ему дали.
фон: var (- пингвин-скин);
Это изменит фон любого элемента, на который вы нацеливаетесь, на серый, поскольку это значение переменной --penguin-skin . Обратите внимание: стили не будут применяться, если имена переменных не будут точно совпадать.
+
## Instructions
- Примените переменную --penguin-skin к свойству background--penguin-skinpenguin-top , penguin-bottom , right-hand и left-hand .
+
+Примените переменную --penguin-skin к свойству background--penguin-skinpenguin-top , penguin-bottom , right-hand и left-hand .
+
## Tests
```yml
tests:
- - text: Примените переменную --penguin-skin к свойству background класса penguin-top .
- testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the --penguin-skin variable to the background property of the penguin-top class.");'
- - text: Примените переменную --penguin-skin к свойству background класса penguin-bottom .
- testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), "Apply the --penguin-skin variable to the background property of the penguin-bottom class.");'
- - text: Примените переменную --penguin-skin к свойству background для right-hand класса.
- testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), "Apply the --penguin-skin variable to the background property of the right-hand class.");'
- - text: Примените переменную --penguin-skin к свойству background для left-hand класса.
- testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), "Apply the --penguin-skin variable to the background property of the left-hand class.");'
+ - text: Apply the --penguin-skin variable to the background property of the penguin-top class.
+ testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
+ - text: Apply the --penguin-skin variable to the background property of the penguin-bottom class.
+ testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));
+ - text: Apply the --penguin-skin variable to the background property of the right-hand class.
+ testString: assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));
+ - text: Apply the --penguin-skin variable to the background property of the left-hand class.
+ testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));
```
@@ -251,14 +256,13 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+var code = ".penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}"
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.russian.md
index 117fa39e34..45520ef957 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.russian.md
@@ -2,25 +2,30 @@
id: 5a9d72ad424fe3d0e10cad16
title: Use a media query to change a variable
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cWmL8UP
+forumTopicId: 301091
localeTitle: Использование медиа-запроса для изменения переменной
---
## Description
- Переменные CSS могут упростить использование медиа-запросов. Например, когда ваш экран меньше или больше точки прерывания вашего медиа-запроса, вы можете изменить значение переменной, и она будет применять свой стиль везде, где он используется.
+
+Переменные CSS могут упростить использование медиа-запросов. Например, когда ваш экран меньше или больше точки прерывания вашего медиа-запроса, вы можете изменить значение переменной, и она будет применять свой стиль везде, где он используется.
+
## Instructions
- В :root селекторе media query измените его так: --penguin-size переопределяется и задается значение 200px . Кроме того, переопределите --penguin-skin и придайте ему значение black . Затем измените размер предварительного просмотра, чтобы увидеть это изменение в действии.
+
+В :root селекторе media query измените его так: --penguin-size переопределяется и задается значение 200px . Кроме того, переопределите --penguin-skin и придайте ему значение black . Затем измените размер предварительного просмотра, чтобы увидеть это изменение в действии.
+
## Tests
```yml
tests:
- - text: ':root должен переназначить переменную --penguin-size до 200px .'
- testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), ":root should reassign the --penguin-size variable to 200px.");'
- - text: ':root должен переназначить переменную --penguin-skin на black .'
- testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ":root should reassign the --penguin-skin variable to black.");'
+ - text: :root should reassign the --penguin-size variable to 200px.
+ testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi));
+ - text: :root should reassign the --penguin-skin variable to black.
+ testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi));
```
@@ -267,14 +272,13 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+var code = "@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}"
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-abbreviated-hex-code.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-abbreviated-hex-code.russian.md
index 8eceb43752..966e9fce1a 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-abbreviated-hex-code.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-abbreviated-hex-code.russian.md
@@ -2,37 +2,42 @@
id: bad87fee1348bd9aedf08719
title: Use Abbreviated Hex Code
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cRkpKAm
+forumTopicId: 18338
localeTitle: Используйте сокращенный шестнадцатеричный код
---
## Description
- Многие люди чувствуют себя в замешательстве, когда им предоставляется возможность использовать более 16 миллионов цветов. И очень сложно запомнить шестнадцатеричный код. К счастью, вы можете сократить его. Например, шестнадцатеричный код красного цвета #FF0000 можно сократить до #F00 . Эта сокращенная форма дает одну цифру для красного, одну цифру для зеленого и одну цифру для синего. Это уменьшает общее количество возможных цветов примерно до 4000. Но браузеры будут интерпретировать #FF0000 и #F00 как один и тот же цвет.
+
+Многие люди чувствуют себя в замешательстве, когда им предоставляется возможность использовать более 16 миллионов цветов. И очень сложно запомнить шестнадцатеричный код. К счастью, вы можете сократить его. Например, шестнадцатеричный код красного цвета #FF0000 можно сократить до #F00 . Эта сокращенная форма дает одну цифру для красного, одну цифру для зеленого и одну цифру для синего. Это уменьшает общее количество возможных цветов примерно до 4000. Но браузеры будут интерпретировать #FF0000 и #F00 как один и тот же цвет.
+
## Instructions
- Вперед, попробуйте использовать сокращенные шестнадцатеричные коды, чтобы покрасить правильные элементы.
цвет
Короткие шестнадцатеричные коды
Cyan
#0FF
зеленый
#0F0
красный
#F00
фуксия
#F0F
+
+Вперед, попробуйте использовать сокращенные шестнадцатеричные коды, чтобы покрасить правильные элементы.
цвет
Короткие шестнадцатеричные коды
Cyan
#0FF
зеленый
#0F0
красный
#F00
фуксия
#F0F
+
## Tests
```yml
tests:
- - text: 'Дайте вашему элементу h1 текст, который I am red!color красный.'
- testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your h1 element with the text I am red! the color red.");'
- - text: 'Используйте сокращенный hex code для красного цвета вместо шестнадцатеричного кода #FF0000 .'
- testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate hex code for the color red instead of the hex code #FF0000.");'
- - text: 'Дайте вашему элементу h1 текст, который I am green!color зеленый.'
- testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your h1 element with the text I am green! the color green.");'
- - text: 'Используйте сокращенный hex code для зеленого цвета вместо шестнадцатеричного кода #00FF00 .'
- testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated hex code for the color green instead of the hex code #00FF00.");'
- - text: 'Дайте вашему элементу h1 текст, который I am cyan!color голубой.'
- testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your h1 element with the text I am cyan! the color cyan.");'
- - text: 'Используйте сокращенный hex code для цвета cyan вместо шестнадцатеричного кода #00FFFF .'
- testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated hex code for the color cyan instead of the hex code #00FFFF.");'
- - text: 'Дайте вашему элементу h1 текст, который I am fuchsia!color фуксии.'
- testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your h1 element with the text I am fuchsia! the color fuchsia.");'
- - text: 'Используйте сокращенный hex code для цветной фуксии вместо шестнадцатеричного кода #FF00FF .'
- testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated hex code for the color fuchsia instead of the hex code #FF00FF.");'
+ - text: Give your h1 element with the text I am red! the color red.
+ testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+ - text: Use the abbreviate hex code for the color red instead of the hex code #FF0000.
+ testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am green! the color green.
+ testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+ - text: Use the abbreviated hex code for the color green instead of the hex code #00FF00.
+ testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am cyan! the color cyan.
+ testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
+ - text: Use the abbreviated hex code for the color cyan instead of the hex code #00FFFF.
+ testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am fuchsia! the color fuchsia.
+ testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
+ - text: Use the abbreviated hex code for the color fuchsia instead of the hex code #FF00FF.
+ testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
```
@@ -71,14 +76,34 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
I am red!
+
+
I am fuchsia!
+
+
I am cyan!
+
+
I am green!
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.russian.md
index 81e6e1a008..0ca439ed43 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.russian.md
@@ -2,29 +2,34 @@
id: bad87dee1348bd9aede07836
title: Use an id Attribute to Style an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cakyZfL
+forumTopicId: 18339
localeTitle: Использовать атрибут id для стилирования элемента
---
## Description
- Одной из замечательных особенностей атрибутов id является то, что, подобно классам, вы можете создавать их с помощью CSS. Однако id не может использоваться повторно и должен применяться только к одному элементу. id также имеет более высокую специфичность (важность), чем класс, поэтому, если оба применяются к одному и тому же элементу и имеют конфликтующие стили, применяются стили id . Вот пример того, как вы можете взять свой элемент с атрибутом idcat-photo-element и присвоить ему зеленый цвет фона. В вашем элементе style :
# cat-photo-element { фон-цвет: зеленый; }
Обратите внимание, что внутри вашего элемента style вы всегда ссылаетесь на классы, помещая a . перед их именами. Вы всегда ссылаетесь на идентификаторы, помещая # перед их именами.
+
+Одной из замечательных особенностей атрибутов id является то, что, подобно классам, вы можете создавать их с помощью CSS. Однако id не может использоваться повторно и должен применяться только к одному элементу. id также имеет более высокую специфичность (важность), чем класс, поэтому, если оба применяются к одному и тому же элементу и имеют конфликтующие стили, применяются стили id . Вот пример того, как вы можете взять свой элемент с атрибутом idcat-photo-element и присвоить ему зеленый цвет фона. В вашем элементе style :
# cat-photo-element { фон-цвет: зеленый; }
Обратите внимание, что внутри вашего элемента style вы всегда ссылаетесь на классы, помещая a . перед их именами. Вы всегда ссылаетесь на идентификаторы, помещая # перед их именами.
+
## Instructions
- Попробуйте дать свою форму, которая теперь имеет атрибут idcat-photo-form , зеленый фон.
+
+Попробуйте дать свою форму, которая теперь имеет атрибут idcat-photo-form , зеленый фон.
+
## Tests
```yml
tests:
- - text: Дайте элементу form идентификатор cat-photo-form .
- testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your form element the id of cat-photo-form.");'
- - text: Элемент form должен иметь зеленый background-color .
- testString: 'assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", "Your form element should have the background-color of green.");'
- - text: 'Убедитесь, что ваш элемент form имеет атрибут id .'
- testString: 'assert(code.match(//gi) && code.match(//gi).length > 0, "Make sure your form element has an id attribute.");'
- - text: Не придайте вашей form никаких атрибутов class или style .
- testString: 'assert(!code.match(//gi) && !code.match(//gi), "Do not give your form any class or style attributes.");'
+ - text: Give your form element the id of cat-photo-form.
+ testString: assert($("form").attr("id") === "cat-photo-form");
+ - text: Your form element should have the background-color of green.
+ testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)");
+ - text: Make sure your form element has an id attribute.
+ testString: assert(code.match(//gi) && code.match(//gi).length > 0);
+ - text: Do not give your form any class or style attributes.
+ testString: assert(!code.match(//gi) && !code.match(//gi));
```
@@ -103,14 +108,78 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.russian.md
index a47eff5bbb..8d8f8697d5 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.russian.md
@@ -2,27 +2,32 @@
id: 58c383d33e2e3259241f3076
title: Use Attribute Selectors to Style Elements
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cnpymfJ
+forumTopicId: 301092
localeTitle: Используйте атрибуты селекторов для стилизации элементов
---
## Description
- Вы id атрибуты id или class к элементам, которые вы хотите специально создать. Они известны как идентификаторы и селектора классов. Существуют и другие селектора CSS, которые вы можете использовать для выбора пользовательских групп элементов в стиле. Давайте снова рассмотрим CatPhotoApp, чтобы использовать CSS Selectors. Для этой задачи вы будете использовать селектор атрибутов [attr=value] , чтобы установить чекбоксы в CatPhotoApp. Этот селектор соответствует элементам стилей с определенным значением атрибута. Например, приведенный ниже код изменяет поля всех элементов с type атрибута и соответствующим значением radio :
[type = 'radio'] { margin: 20px 0px 20px 0px; }
+
+Вы id атрибуты id или class к элементам, которые вы хотите специально создать. Они известны как идентификаторы и селектора классов. Существуют и другие селектора CSS, которые вы можете использовать для выбора пользовательских групп элементов в стиле. Давайте снова рассмотрим CatPhotoApp, чтобы использовать CSS Selectors. Для этой задачи вы будете использовать селектор атрибутов [attr=value] , чтобы установить чекбоксы в CatPhotoApp. Этот селектор соответствует элементам стилей с определенным значением атрибута. Например, приведенный ниже код изменяет поля всех элементов с type атрибута и соответствующим значением radio :
[type = 'radio'] { margin: 20px 0px 20px 0px; }
+
## Instructions
- Используя селектор атрибутов type, присвойте чекбоксам в CatPhotoApp верхний марджин 10px и нижний марджин 15px.
+
+Используя селектор атрибутов type, присвойте чекбоксам в CatPhotoApp верхний марджин 10px и нижний марджин 15px.
+
## Tests
```yml
tests:
- - text: Селектор атрибутов type должен использоваться для выбора флажков.
- testString: 'assert(code.match(/
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.russian.md
index 7a6cc00cb3..684c2f99d0 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.russian.md
@@ -2,29 +2,36 @@
id: bad87fee1348bd9afdf08726
title: Use Clockwise Notation to Specify the Margin of an Element
challengeType: 0
-videoUrl: ''
-localeTitle: 'Используйте обозначение по часовой стрелке, чтобы указать маржу элемента'
+videoUrl: https://scrimba.com/c/cnpybAd
+forumTopicId: 18345
+localeTitle: Используйте обозначение по часовой стрелке, чтобы указать маржу элемента
---
## Description
- Давайте попробуем это снова, но с margin в этот раз. Вместо того, чтобы указывать свойства margin-top , margin-right , margin-bottom и margin-left отдельно, вы можете указать их все в одной строке, например: margin: 10px 20px 10px 20px; Эти четыре значения работают как часы: верхний, правый, нижний, левый и будут давать тот же результат, что и при использовании отдельных margin свойств.
+
+Давайте попробуем это снова, но с margin в этот раз. Вместо того, чтобы указывать свойства margin-top , margin-right , margin-bottom и margin-left отдельно, вы можете указать их все в одной строке, например: margin: 10px 20px 10px 20px; Эти четыре значения работают как часы: верхний, правый, нижний, левый и будут давать тот же результат, что и при использовании отдельных margin свойств.
+
## Instructions
- Используйте Clockwise Notation чтобы дать элементу класса blue-box margin 40px на его верхней и левой сторонах, и только 20 20px на нижней и правой стороне.
+
+Используйте Clockwise Notation чтобы дать элементу класса blue-box margin 40px на его верхней и левой сторонах, и только 20 20px на нижней и правой стороне.
+
## Tests
```yml
tests:
- - text: Ваш blue-box класс должен дать верхнюю часть элементов 40px из margin .
- testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your blue-box class should give the top of elements 40px of margin.");'
- - text: Ваш класс blue-box должен предоставить право элементов 20pxmargin .
- testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your blue-box class should give the right of elements 20px of margin.");'
- - text: Ваш класс с blue-box должен дать нижнюю часть 20pxmargin .
- testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your blue-box class should give the bottom of elements 20px of margin.");'
- - text: Ваш класс с blue-box должен оставить слева от элементов 40pxmargin .
- testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your blue-box class should give the left of elements 40px of margin.");'
+ - text: Your blue-box class should give the top of elements 40px of margin.
+ testString: assert($(".blue-box").css("margin-top") === "40px");
+ - text: Your blue-box class should give the right of elements 20px of margin.
+ testString: assert($(".blue-box").css("margin-right") === "20px");
+ - text: Your blue-box class should give the bottom of elements 20px of margin.
+ testString: assert($(".blue-box").css("margin-bottom") === "20px");
+ - text: Your blue-box class should give the left of elements 40px of margin.
+ testString: assert($(".blue-box").css("margin-left") === "40px");
+ - text: You should use the clockwise notation to set the margin of blue-box class.
+ testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
```
@@ -76,14 +83,48 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
margin
+
+
+
padding
+
padding
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.russian.md
index 3e7556a723..0359f7986f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.russian.md
@@ -2,31 +2,36 @@
id: bad87fee1348bd9aedf08826
title: Use Clockwise Notation to Specify the Padding of an Element
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cB7mBS9
+forumTopicId: 18346
localeTitle: Использовать по часовой стрелке для указания заполнения элемента
---
## Description
- Вместо того, чтобы отдельно указывать свойства padding-top , padding-right , padding-bottom и padding-left , вы можете указать их все в одной строке, например: padding: 10px 20px 10px 20px; Эти четыре значения работают как часы: верх, правый, нижний, левый и будут давать то же самое, что и при использовании спецификаций дополнений для конкретной стороны.
+
+Вместо того, чтобы отдельно указывать свойства padding-top , padding-right , padding-bottom и padding-left , вы можете указать их все в одной строке, например: padding: 10px 20px 10px 20px; Эти четыре значения работают как часы: верх, правый, нижний, левый и будут давать то же самое, что и при использовании спецификаций дополнений для конкретной стороны.
+
## Instructions
- Используйте «По часовой стрелке», чтобы присвоить классу «.blue-box» padding40px на верхней и левой стороне, но только 20 20px на нижней и правой стороне.
+
+Используйте «По часовой стрелке», чтобы присвоить классу «.blue-box» padding40px на верхней и левой стороне, но только 20 20px на нижней и правой стороне.
+
## Tests
```yml
tests:
- - text: Ваш blue-box класс должен дать верхнюю часть элементов 40px из padding .
- testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your blue-box class should give the top of elements 40px of padding.");'
- - text: Ваш класс с blue-box должен давать право на элементы 20pxpadding .
- testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your blue-box class should give the right of elements 20px of padding.");'
- - text: Ваш класс blue-box должен дать основание элементов 20pxpadding .
- testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your blue-box class should give the bottom of elements 20px of padding.");'
- - text: Ваш blue-box класс должен дать слева от элементов 40px из padding .
- testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your blue-box class should give the left of elements 40px of padding.");'
- - text: 'Вы должны использовать обозначение по часовой стрелке, чтобы установить заполнение класса blue-box .'
- testString: 'assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), "You should use the clockwise notation to set the padding of blue-box class.");'
+ - text: Your blue-box class should give the top of elements 40px of padding.
+ testString: assert($(".blue-box").css("padding-top") === "40px");
+ - text: Your blue-box class should give the right of elements 20px of padding.
+ testString: assert($(".blue-box").css("padding-right") === "20px");
+ - text: Your blue-box class should give the bottom of elements 20px of padding.
+ testString: assert($(".blue-box").css("padding-bottom") === "20px");
+ - text: Your blue-box class should give the left of elements 40px of padding.
+ testString: assert($(".blue-box").css("padding-left") === "40px");
+ - text: You should use the clockwise notation to set the padding of blue-box class.
+ testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
```
@@ -78,14 +83,48 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
margin
+
+
+
padding
+
padding
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.russian.md
index c4fd99be4c..d87b6e950f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.russian.md
@@ -2,32 +2,36 @@
id: bad87fee1348bd9aedf08805
title: Use CSS Selectors to Style Elements
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cJKMBT2
+forumTopicId: 18349
localeTitle: Используйте селекторы CSS для изменения стилизации элементов
---
## Description
-
- В CSS есть сотни properties CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <h2 style="color: red;">CatPhotoApp</h2> , вы стали стилизовать этот отдельный элемент h2 со inline CSS , который обозначает Cascading Style Sheets . Это один из способов указать стиль элемента, но есть лучший способ применить CSS . В верхней части кода создайте блок style следующим образом:
<style> </ style>
Внутри этого блока стиля вы можете создать CSS selector для всех элементов h2 . Например, если вы хотите, чтобы все элементы h2 были красными, вы можете добавить правило CSS, которое выглядит так:
<style> h2 {color: red;} </ style>
Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( { и } ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора.
+
+В CSS есть сотни properties CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <h2 style="color: red;">CatPhotoApp</h2> , вы стали стилизовать этот отдельный элемент h2 со inline CSS , который обозначает Cascading Style Sheets . Это один из способов указать стиль элемента, но есть лучший способ применить CSS . В верхней части кода создайте блок style следующим образом:
<style> </ style>
Внутри этого блока стиля вы можете создать CSS selector для всех элементов h2 . Например, если вы хотите, чтобы все элементы h2 были красными, вы можете добавить правило CSS, которое выглядит так:
<style> h2 {color: red;} </ style>
Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( { и } ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора.
+
## Instructions
- Удалите атрибут стиля элемента h2 и вместо этого создайте блок style CSS. Добавьте необходимые правила CSS, чтобы все элементы h2 стали синими.
+
+Удалите атрибут стиля элемента h2 и вместо этого создайте блок style CSS. Добавьте необходимые правила CSS, чтобы все элементы h2 стали синими.
+
## Tests
```yml
tests:
- - text: Удалите атрибут стиля из вашего элемента h2 .
- testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your h2 element.");'
- - text: Создайте элемент style .
- testString: 'assert($("style") && $("style").length > 1, "Create a style element.");'
- - text: Ваш элемент h2 должен быть синим.
- testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your h2 element should be blue.");'
- - text: 'Убедитесь, что объявление вашей таблицы стилей h2 действительно с точкой с запятой и закрывающей скобкой.'
- testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), "Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.");'
- - text: 'Убедитесь, что все ваши элементы style действительны и имеют закрывающий тег.'
- testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(//g) || []).length, "Make sure all your style elements are valid and have a closing tag.");'
+ - text: Remove the style attribute from your h2 element.
+ testString: assert(!$("h2").attr("style"));
+ - text: Create a style element.
+ testString: assert($("style") && $("style").length >= 1);
+ - text: Your h2 element should be blue.
+ testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
+ - text: Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.
+ testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
+ - text: Make sure all your style elements are valid and have a closing tag.
+ testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(//g) || []).length);
```
@@ -75,14 +79,48 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.russian.md
index 570d751b8d..5ae3dea1c1 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.russian.md
@@ -2,27 +2,32 @@
id: 5a9d725e424fe3d0e10cad10
title: Use CSS Variables to change several elements at once
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c6bDECm
+forumTopicId: 301093
localeTitle: Используйте переменные CSS для изменения сразу нескольких элементов
---
## Description
- Переменные CSS - это мощный способ изменить сразу несколько свойств стиля CSS, изменив только одно значение. Следуйте инструкциям ниже, чтобы увидеть, как изменение только трех значений может изменить стиль многих элементов.
+
+Переменные CSS - это мощный способ изменить сразу несколько свойств стиля CSS, изменив только одно значение. Следуйте инструкциям ниже, чтобы увидеть, как изменение только трех значений может изменить стиль многих элементов.
+
## Instructions
- В классе penguin измените значение black на gray , значение gray на white , а yellow на orange .
+
+В классе penguin измените значение black на gray , значение gray на white , а yellow на orange .
+
## Tests
```yml
tests:
- - text: класс penguin должен объявить переменную --penguin-skin и назначить ее gray .
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "penguin class should declare the --penguin-skin variable and assign it to gray.");'
- - text: класс penguin должен объявить переменную --penguin-belly и назначить ее white .
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "penguin class should declare the --penguin-belly variable and assign it to white.");'
- - text: класс penguin должен объявить переменную --penguin-beak и присвоить ее orange .
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), "penguin class should declare the --penguin-beak variable and assign it to orange.");'
+ - text: penguin class should declare the --penguin-skin variable and assign it to gray.
+ testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
+ - text: penguin class should declare the --penguin-belly variable and assign it to white.
+ testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
+ - text: penguin class should declare the --penguin-beak variable and assign it to orange.
+ testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));
```
@@ -239,14 +244,13 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+var code = ".penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}"
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.russian.md
index ce1086f9e8..bc1722cc1f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.russian.md
@@ -2,25 +2,30 @@
id: bad87fee1348bd9aedf08726
title: Use Hex Code for Specific Colors
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/c8W9mHM
+forumTopicId: 18350
localeTitle: Использовать шестнадцатеричный код для конкретных цветов
---
## Description
- Знаете ли вы, что существуют другие способы представления цветов в CSS? Один из этих способов называется шестнадцатеричным кодом или hex code для краткости. Обычно мы используем decimals или базовые 10 чисел, которые используют символы от 0 до 9 для каждой цифры. Hexadecimals (или hex ) - это базовые 16 чисел. Это означает, что он использует шестнадцать различных символов. Как десятичные знаки, символы 0-9 представляют значения от нуля до девяти. Затем A, B, C, D, E, F представляют значения от десяти до пятнадцати. В целом, от 0 до F может представлять цифру в hexadecimal форме, что дает нам 16 возможных значений. Здесь вы можете найти более подробную информацию о шестнадцатеричных числах . В CSS мы можем использовать 6 шестнадцатеричных цифр для представления цветов, по два для красных (R), зеленых (G) и синих (B) компонентов. Например, #000000 является черным и также является наименьшим возможным значением. Здесь вы можете найти более подробную информацию о цветовой системе RGB .
body { цвет: # 000000; }
+
+Знаете ли вы, что существуют другие способы представления цветов в CSS? Один из этих способов называется шестнадцатеричным кодом или hex code для краткости. Обычно мы используем decimals или базовые 10 чисел, которые используют символы от 0 до 9 для каждой цифры. Hexadecimals (или hex ) - это базовые 16 чисел. Это означает, что он использует шестнадцать различных символов. Как десятичные знаки, символы 0-9 представляют значения от нуля до девяти. Затем A, B, C, D, E, F представляют значения от десяти до пятнадцати. В целом, от 0 до F может представлять цифру в hexadecimal форме, что дает нам 16 возможных значений. Здесь вы можете найти более подробную информацию о шестнадцатеричных числах . В CSS мы можем использовать 6 шестнадцатеричных цифр для представления цветов, по два для красных (R), зеленых (G) и синих (B) компонентов. Например, #000000 является черным и также является наименьшим возможным значением. Здесь вы можете найти более подробную информацию о цветовой системе RGB .
body { цвет: # 000000; }
+
## Instructions
- Замените слово black в фоновом цвете элемента body с его hex code , #000000 .
+
+Замените слово black в фоновом цвете элемента body с его hex code , #000000 .
+
## Tests
```yml
tests:
- - text: Дайте вашему body элемент фона черного цвета.
- testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your body element the background-color of black.");'
- - text: Используйте hex code для черного цвета вместо слова black .
- testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi), "Use the hex code for the color black instead of the word black.");'
+ - text: Give your body element the background-color of black.
+ testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
+ - text: Use the hex code for the color black instead of the word black.
+ testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));
```
@@ -42,14 +47,17 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.russian.md
index 1f810260dd..41198baff9 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.russian.md
@@ -2,37 +2,42 @@
id: bad87fee1348bd9aedf08721
title: Use Hex Code to Mix Colors
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cK89PhP
+forumTopicId: 18359
localeTitle: Используйте шестнадцатеричный код для смешивания цветов
---
## Description
- Для представления цвета шестнадцатеричные коды используют 6 шестнадцатеричных цифр, по две для красного (R), зеленого (G) и синего (B) компонентов. Для этих трех чистых цветов (красный, зеленый и синий) мы можем варьировать количество каждого из них, чтобы создать более 16 миллионов других цветов! Например, оранжевый чистый красный, смешанный с каким-то зеленым, и не синий. В шестнадцатеричном коде это означает, что это #FFA500 . Цифра 0 является наименьшим числом в шестнадцатеричном коде и представляет полное отсутствие цвета. Цифра F является наивысшим числом в шестнадцатеричном коде и представляет максимально возможную яркость.
+
+Для представления цвета шестнадцатеричные коды используют 6 шестнадцатеричных цифр, по две для красного (R), зеленого (G) и синего (B) компонентов. Для этих трех чистых цветов (красный, зеленый и синий) мы можем варьировать количество каждого из них, чтобы создать более 16 миллионов других цветов! Например, оранжевый чистый красный, смешанный с каким-то зеленым, и не синий. В шестнадцатеричном коде это означает, что это #FFA500 . Цифра 0 является наименьшим числом в шестнадцатеричном коде и представляет полное отсутствие цвета. Цифра F является наивысшим числом в шестнадцатеричном коде и представляет максимально возможную яркость.
+
## Instructions
- Замените цветные слова в нашем элементе style на их правильные шестнадцатеричные коды.
цвет
Шестнадцатеричный код
Dodger Blue
#1E90FF
зеленый
#00FF00
оранжевый
#FFA500
красный
#FF0000
+
+Замените цветные слова в нашем элементе style на их правильные шестнадцатеричные коды.
цвет
Шестнадцатеричный код
Dodger Blue
#1E90FF
зеленый
#00FF00
оранжевый
#FFA500
красный
#FF0000
+
## Tests
```yml
tests:
- - text: 'Дайте вашему текстовому h1 элементу I am red!color красный.'
- testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your h1 element with the text I am red! the color red.");'
- - text: Используйте hex code для красного цвета вместо слова red .
- testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), "Use the hex code for the color red instead of the word red.");'
- - text: 'Дайте вашему текстовому h1 элементу I am green!color зеленый.'
- testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your h1 element with the text I am green! the color green.");'
- - text: Используйте hex code для зеленого цвета вместо слова green .
- testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), "Use the hex code for the color green instead of the word green.");'
- - text: 'Дайте вашему текстовому h1 элементу I am dodger blue!color утка синий.'
- testString: 'assert($(".dodger-blue-text").css("color") === "rgb(30, 144, 255)", "Give your h1 element with the text I am dodger blue! the color dodger blue.");'
- - text: Используйте hex code для синтаксиса цвета вместо слова dodgerblue .
- testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), "Use the hex code for the color dodger blue instead of the word dodgerblue.");'
- - text: 'Дайте вашему элементу h1 текст, который I am orange!color оранжевый.'
- testString: 'assert($(".orange-text").css("color") === "rgb(255, 165, 0)", "Give your h1 element with the text I am orange! the color orange.");'
- - text: Используйте hex code для оранжевого цвета вместо слова « orange .
- testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), "Use the hex code for the color orange instead of the word orange.");'
+ - text: Give your h1 element with the text I am red! the color red.
+ testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+ - text: Use the hex code for the color red instead of the word red.
+ testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am green! the color green.
+ testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+ - text: Use the hex code for the color green instead of the word green.
+ testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am dodger blue! the color dodger blue.
+ testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
+ - text: Use the hex code for the color dodger blue instead of the word dodgerblue.
+ testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am orange! the color orange.
+ testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
+ - text: Use the hex code for the color orange instead of the word orange.
+ testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
```
@@ -71,14 +76,34 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
I am red!
+
+
I am green!
+
+
I am dodger blue!
+
+
I am orange!
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.russian.md
index e91203a173..f50481d480 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.russian.md
@@ -2,37 +2,42 @@
id: bad82fee1348bd9aedf08721
title: Use RGB to Mix Colors
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cm24JU6
+forumTopicId: 18368
localeTitle: Используйте RGB для смешивания цветов
---
## Description
- Как и с шестнадцатеричным кодом, вы можете смешивать цвета в RGB, используя комбинации разных значений.
+
+Как и с шестнадцатеричным кодом, вы можете смешивать цвета в RGB, используя комбинации разных значений.
+
## Instructions
- Замените шестнадцатеричные коды в нашем элементе style с их правильными значениями RGB.
цвет
RGB
синий
rgb(0, 0, 255)
красный
rgb(255, 0, 0)
орхидея
rgb(218, 112, 214)
охра
rgb(160, 82, 45)
+
+Замените шестнадцатеричные коды в нашем элементе style с их правильными значениями RGB.
цвет
RGB
синий
rgb(0, 0, 255)
красный
rgb(255, 0, 0)
орхидея
rgb(218, 112, 214)
охра
rgb(160, 82, 45)
+
## Tests
```yml
tests:
- - text: 'Дайте вашему элементу h1 текст, который I am red!color красный.'
- testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your h1 element with the text I am red! the color red.");'
- - text: Используйте rgb для красного цвета.
- testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi), "Use rgb for the color red.");'
- - text: 'Дайте вашему элементу h1 текст, который I am orchid!color орхидеи.'
- testString: 'assert($(".orchid-text").css("color") === "rgb(218, 112, 214)", "Give your h1 element with the text I am orchid! the color orchid.");'
- - text: Используйте rgb для цветной орхидеи.
- testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi), "Use rgb for the color orchid.");'
- - text: 'Дайте вашему элементу h1 текст, который I am blue!color синий.'
- testString: 'assert($(".blue-text").css("color") === "rgb(0, 0, 255)", "Give your h1 element with the text I am blue! the color blue.");'
- - text: Используйте rgb для синего цвета.
- testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi), "Use rgb for the color blue.");'
- - text: 'Дайте вашему элементу h1 текст, который I am sienna!color сиена.'
- testString: 'assert($(".sienna-text").css("color") === "rgb(160, 82, 45)", "Give your h1 element with the text I am sienna! the color sienna.");'
- - text: Используйте rgb для цвета sienna.
- testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi), "Use rgb for the color sienna.");'
+ - text: Give your h1 element with the text I am red! the color red.
+ testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+ - text: Use rgb for the color red.
+ testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am orchid! the color orchid.
+ testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
+ - text: Use rgb for the color orchid.
+ testString: assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am blue! the color blue.
+ testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
+ - text: Use rgb for the color blue.
+ testString: assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));
+ - text: Give your h1 element with the text I am sienna! the color sienna.
+ testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
+ - text: Use rgb for the color sienna.
+ testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));
```
@@ -71,14 +76,34 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
I am red!
+
+
I am orchid!
+
+
I am sienna!
+
+
I am blue!
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.russian.md
index efc0dacbd8..9d9104c66e 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.russian.md
@@ -2,25 +2,30 @@
id: bad87fee1348bd9aede08718
title: Use RGB values to Color Elements
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/c/cRkp2fr
+forumTopicId: 18369
localeTitle: Используйте значения RGB для цветных элементов
---
## Description
- Еще один способ отображения цветов в CSS - использование значений RGB . Значение RGB для черного выглядит так: rgb(0, 0, 0) Значение RGB для белого выглядит следующим образом: rgb(255, 255, 255) Вместо того, чтобы использовать шесть шестнадцатеричных цифр, например, с шестнадцатеричным кодом, с RGB вы укажете яркость каждого цвета числом от 0 до 255. Если вы правильно посчитаете, две цифры для одного цвета равные 16 на 16, что дает нам всего 256 значений. Таким образом, RGB , начинает отсчет с нуля, и имеет то же количество возможных значений, что и шестнадцатеричный код. Вот пример того, как изменить фон тела на оранжевый, используя его код RGB.
body { background-color: rgb (255, 165, 0); }
+
+Еще один способ отображения цветов в CSS - использование значений RGB . Значение RGB для черного выглядит так: rgb(0, 0, 0) Значение RGB для белого выглядит следующим образом: rgb(255, 255, 255) Вместо того, чтобы использовать шесть шестнадцатеричных цифр, например, с шестнадцатеричным кодом, с RGB вы укажете яркость каждого цвета числом от 0 до 255. Если вы правильно посчитаете, две цифры для одного цвета равные 16 на 16, что дает нам всего 256 значений. Таким образом, RGB , начинает отсчет с нуля, и имеет то же количество возможных значений, что и шестнадцатеричный код. Вот пример того, как изменить фон тела на оранжевый, используя его код RGB.
body { background-color: rgb (255, 165, 0); }
+
## Instructions
- Давайте заменим шестнадцатеричный код в цвете фона нашего body на значение RGB для черного: rgb(0, 0, 0)
+
+Давайте заменим шестнадцатеричный код в цвете фона нашего body на значение RGB для черного: rgb(0, 0, 0)
+
## Tests
```yml
tests:
- - text: Элемент вашего body должен иметь черный фон.
- testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Your body element should have a black background.");'
- - text: Используйте rgb чтобы дать вашему body черный цвет.
- testString: 'assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), "Use rgb to give your body element a color of black.");'
+ - text: Your body element should have a black background.
+ testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
+ - text: Use rgb to give your body element a color of black.
+ testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig));
```
@@ -42,14 +47,17 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.russian.md
index 9bc2f28dc8..d0eb8b9e37 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.russian.md
@@ -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
- Давайте добавим кнопку submit в вашу форму. Нажатие этой кнопки отправит данные из вашей формы по URL-адресу, указанному вами с помощью атрибута формы action . Вот пример кнопки отправки: <button type="submit">this button submits the form</button>
+
+Давайте добавим кнопку submit в вашу форму. Нажатие этой кнопки отправит данные из вашей формы по URL-адресу, указанному вами с помощью атрибута формы action . Вот пример кнопки отправки: <button type="submit">this button submits the form</button>
+
## Instructions
- Добавьте кнопку в качестве последнего элемента вашего элемента form с типом submit и «Отправить» в качестве текста.
+
+Добавьте кнопку в качестве последнего элемента вашего элемента form с типом submit и «Отправить» в качестве текста.
+
## Tests
```yml
tests:
- - text: Ваша форма должна иметь кнопку внутри.
- testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
-
- - text: 'Кнопка отправки должна иметь type атрибут, установленный для submit .'
-
- testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute type set to submit.");'
- - text: Кнопка отправки должна содержать только текст «Отправить».
- testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
- - text: 'Убедитесь, что ваш элемент button имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/button>/g) && code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.russian.md
index 21bd954f89..2bf0fab32f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.russian.md
@@ -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
- Вы можете добавлять изображения на свой сайт с помощью элемента img и указывать URL-адрес определенного изображения, используя атрибут src . Примером этого может быть: <img src="https://www.your-image-source.com/your-image.jpg"> Обратите внимание, что элементы img самозакрываются. Все элементы imgдолжны иметь атрибут alt . Текст внутри атрибута alt используется для чтения с экрана для улучшения доступности и отображается в виде текста, если изображение не загружается. Примечание. Если изображение является чисто декоративным, использование чистого атрибута alt является наилучшей практикой. В идеале атрибут alt не должен содержать специальных символов, если это не требуется. Давайте добавим атрибут alt к нашему примеру img выше: <img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">
+
+Вы можете добавлять изображения на свой сайт с помощью элемента img и указывать URL-адрес определенного изображения, используя атрибут src . Примером этого может быть: <img src="https://www.your-image-source.com/your-image.jpg"> Обратите внимание, что элементы img самозакрываются. Все элементы imgдолжны иметь атрибут alt . Текст внутри атрибута alt используется для чтения с экрана для улучшения доступности и отображается в виде текста, если изображение не загружается. Примечание. Если изображение является чисто декоративным, использование чистого атрибута alt является наилучшей практикой. В идеале атрибут alt не должен содержать специальных символов, если это не требуется. Давайте добавим атрибут alt к нашему примеру img выше: <img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">
+
## Instructions
- Попробуем добавить изображение на наш сайт: вставьте тег img перед элементом h2 . Теперь установите атрибут src так, чтобы он указывал на этот url: https://bit.ly/fcc-relaxing-cat Наконец, не забудьте дать вашему изображению текст alt .
+
+Попробуем добавить изображение на наш сайт: вставьте тег img перед элементом h2 . Теперь установите атрибут src так, чтобы он указывал на этот url: https://bit.ly/fcc-relaxing-cat Наконец, не забудьте дать вашему изображению текст alt .
+
## Tests
```yml
tests:
- - text: Ваша страница должна иметь элемент изображения.
- testString: 'assert($("img").length > 0, "Your page should have an image element.");'
- - text: У вашего изображения должен быть атрибут src, который указывает на изображение котенка.
- 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 src attribute that points to the kitten image.");'
- - text: Элемент изображения должен иметь атрибут alt .
- testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element must have an alt attribute.");'
+ - text: Your page should have an image element.
+ testString: assert($("img").length);
+ - text: Your image should have a src 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 alt attribute must not be empty.
+ testString: assert($("img").attr("alt") && $("img").attr("alt").length && /)\S+\1\S*\/?>/.test(code.replace(/\s/g,'')));
```
@@ -46,14 +51,18 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
CatPhotoApp
+
+
+
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.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.russian.md
index 7fbbec0a24..c9c9870907 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.russian.md
@@ -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
- Текст placeholder'а - это то, что отображается в вашем элементе input до того, как ваш пользователь ввел что-либо. Вы можете создать текст placeholder'а следующим образом: <input type="text" placeholder="this is placeholder text">
+
+Текст placeholder'а - это то, что отображается в вашем элементе input до того, как ваш пользователь ввел что-либо. Вы можете создать текст placeholder'а следующим образом: <input type="text" placeholder="this is placeholder text">
+
## Instructions
- Задайте значение placeholder вашего input текста «URL-адрес кота».
+
+Задайте значение placeholder вашего input текста «URL-адрес кота».
+
## Tests
```yml
tests:
- - text: Добавьте атрибут placeholder в существующий элемент input текста.
- testString: 'assert($("input[placeholder]").length > 0, "Add a placeholder attribute to the existing text input 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: Готовый элемент input должен иметь действительный синтаксис.
- testString: 'assert($("input[type=text]").length > 0 && code.match(/\s]+))?)+\s*|\s*)\/?>/gi), "The finished input element should have valid syntax.");'
+ - text: Add a placeholder attribute to the existing text input 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 input element should not have a closing tag.
+ testString: assert(!code.match(/.*<\/input>/gi));
+ - text: The finished input element should have valid syntax.
+ testString: assert($("input[type=text]").length > 0);
```
@@ -59,14 +66,32 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.russian.md
index 2af20ebb85..c5882708c0 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.russian.md
@@ -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
- Вы можете сделать чекбокс или радиокнопку включенными по умолчанию с помощью атрибута checked. Для этого просто добавьте слово "checked" во внутреннюю часть тега input. Например:
+
+Вы можете сделать чекбокс или радиокнопку включенными по умолчанию с помощью атрибута checked. Для этого просто добавьте слово "checked" во внутреннюю часть тега input. Например:
+
## Instructions
- Настройте первую из ваших radio buttons и первый из ваших checkboxes так чтобы они были отмеченны по умолчанию.
+
+Настройте первую из ваших radio buttons и первый из ваших checkboxes так чтобы они были отмеченны по умолчанию.
+
## 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:
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/comment-out-html.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/comment-out-html.russian.md
index e676054f5f..df3ecd7a44 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/comment-out-html.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/comment-out-html.russian.md
@@ -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
- Помните, что для того, чтобы начать комментарий, вам нужно использовать <!-- и для завершения комментария, вам нужно использовать --> Здесь вам нужно будет закончить комментарий до того, как начнется ваш элемент h2 .
+
+Помните, что для того, чтобы начать комментарий, вам нужно использовать <!-- и для завершения комментария, вам нужно использовать --> Здесь вам нужно будет закончить комментарий до того, как начнется ваш элемент h2 .
+
## Instructions
- Вы можете комментровать элементы h1 и p , но не элемент h2 .
+
+Вы можете комментровать элементы h1 и p , но не элемент h2 .
+
## Tests
```yml
tests:
- - text: Прокомментируйте свой элемент h1 чтобы он не был виден на вашей странице.
- testString: 'assert(($("h1").length === 0), "Comment out your h1 element so that it is not visible on your page.");'
- - text: 'Оставьте свой h2 элемент раскомментированным, чтобы он был виден на вашей странице.'
- testString: 'assert(($("h2").length > 0), "Leave your h2 element uncommented so that it is visible on your page.");'
- - text: Прокомментируйте свой элемент p чтобы он не был виден на вашей странице.
- testString: 'assert(($("p").length === 0), "Comment out your p element so that it is not visible on your page.");'
- - text: Не забудьте закрыть каждый из ваших комментариев с помощью --> .
- testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with -->.");'
- - text: Не изменяйте порядок h1h2 или p в коде.
- testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="
" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="
" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="
") , "Do not change the order of the h1h2 or p in the code.");'
+ - text: Comment out your h1 element so that it is not visible on your page.
+ testString: assert(($("h1").length === 0));
+ - text: Leave your h2 element uncommented so that it is visible on your page.
+ testString: assert(($("h2").length > 0));
+ - text: Comment out your p 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 -->.
+ testString: assert(code.match(/[^fc]-->/g).length > 1);
+ - text: Do not change the order of the h1h2 or p in the code.
+ testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.russian.md
index 1506036935..02575b84bb 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.russian.md
@@ -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
- HTML имеет специальный элемент для создания unordered lists или списков стилей в стиле пули. Неупорядоченные списки начинаются с элемента открытия <ul> , за которым следует любое количество элементов <li> . Наконец, неупорядоченные списки закрываются с помощью </ul> Например:
<UL> <Li> молоко </ li> <Li> сыр </ li> </ UL>
создаст список стиля пули «молоко» и «сыр».
+
+HTML имеет специальный элемент для создания unordered lists или списков стилей в стиле пули. Неупорядоченные списки начинаются с элемента открытия <ul> , за которым следует любое количество элементов <li> . Наконец, неупорядоченные списки закрываются с помощью </ul> Например:
<UL> <Li> молоко </ li> <Li> сыр </ li> </ UL>
создаст список стиля пули «молоко» и «сыр».
+
## Instructions
- Удалите последние два элемента p и создайте неупорядоченный список из трех вещей, которые любят кошки в нижней части страницы.
+
+Удалите последние два элемента p и создайте неупорядоченный список из трех вещей, которые любят кошки в нижней части страницы.
+
## Tests
```yml
tests:
- - text: Создайте элемент ul .
- testString: 'assert($("ul").length > 0, "Create a ul element.");'
- - text: У вас должно быть три элемента li в вашем элементе ul .
- testString: 'assert($("ul li").length > 2, "You should have three li elements within your ul element.");'
- - text: 'Убедитесь, что ваш элемент ul имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/ul>/gi) && code.match(/
/gi).length === code.match(/
ul element has a closing tag.");'
- - text: 'Убедитесь, что ваши элементы li закрывают теги.'
- testString: 'assert(code.match(/<\/li>/gi) && code.match(/]/gi) && code.match(/<\/li>/gi).length === code.match(/]/gi).length, "Make sure your li elements have closing tags.");'
- - text: Убедитесь, что ваши элементы li не содержат пустую строку или только пробел.
- testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0, 'Make sure your li elements don\’t contain an empty string or only white-space.');
+ - text: Create a ul element.
+ testString: assert($("ul").length > 0);
+ - text: You should have three li elements within your ul element.
+ testString: assert($("ul li").length > 2);
+ - text: Make sure your ul element has a closing tag.
+ testString: assert(code.match(/<\/ul>/gi) && code.match(/
/gi).length === code.match(/
li
elements have closing tags.
+ testString: assert(code.match(/<\/li>/gi) && code.match(/]/gi) && code.match(/<\/li>/gi).length === code.match(/]/gi).length);
+ - text: Make sure your li 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:
-
-
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-form-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-form-element.russian.md
index 2818b7fddf..2e038841d4 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-form-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-form-element.russian.md
@@ -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
- Вы можете создавать веб-формы, которые фактически отправляют данные на сервер, используя не что иное, как чистый HTML. Вы можете сделать это, указав действие в элементе form . Например: <form action="/url-where-you-want-to-submit-form-data"></form>
+
+Вы можете создавать веб-формы, которые фактически отправляют данные на сервер, используя не что иное, как чистый HTML. Вы можете сделать это, указав действие в элементе form . Например: <form action="/url-where-you-want-to-submit-form-data"></form>
+
## Instructions
- Заглушите свое текстовое поле внутри элемента form и добавьте атрибут action="/submit-cat-photo" в элемент формы.
+
+Заглушите свое текстовое поле внутри элемента form и добавьте атрибут action="/submit-cat-photo" в элемент формы.
+
## Tests
```yml
tests:
- - text: Вставьте элемент ввода текста в элемент form .
- testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a form element.");'
- - text: 'Убедитесь, что ваша form имеет атрибут action который установлен в /submit-cat-photo'
- testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your form has an action attribute which is set to /submit-cat-photo");'
- - text: 'Убедитесь, что ваш элемент form имеет хорошо сформированные открытые и закрытые метки.'
- testString: 'assert(code.match(/<\/form>/g) && code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.russian.md
index 9a82df0d21..3ee9b7fa2f 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.russian.md
@@ -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
- В формах обычно используют checkboxes'ы для вопросов, которые могут иметь более одного ответа. Чекбокс - это тип input Каждый из ваших чекбоксов может быть вложен в свой собственный элемент label . Обернув элемент input элементом label вы автоматически свяжете этот чекбокс с элементом label, который окружает его. Все связанные с ним флажки должны иметь одинаковый атрибут name . Считается лучшей практикой явно определить отношения между input с типом чекбокс и соответствующим label, установив атрибут for на label элемента в соответствии с id атрибута соответствующего input элемента. Вот пример чекбокса: <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
+
+В формах обычно используют checkboxes'ы для вопросов, которые могут иметь более одного ответа. Чекбокс - это тип input Каждый из ваших чекбоксов может быть вложен в свой собственный элемент label . Обернув элемент input элементом label вы автоматически свяжете этот чекбокс с элементом label, который окружает его. Все связанные с ним флажки должны иметь одинаковый атрибут name . Считается лучшей практикой явно определить отношения между input с типом чекбокс и соответствующим label, установив атрибут for на label элемента в соответствии с id атрибута соответствующего input элемента. Вот пример чекбокса: <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
+
## Instructions
- Добавьте в свою форму набор из трех чекбоксов. Каждый чекбокс должен быть вложен в свой собственный элемент label . Всем трем чекбоксам присвойте атрибут name со значением personality.
+
+Добавьте в свою форму набор из трех чекбоксов. Каждый чекбокс должен быть вложен в свой собственный элемент label . Всем трем чекбоксам присвойте атрибут name со значением personality.
+
## Tests
```yml
tests:
- - text: На вашей странице должно быть три элемента флажка.
- testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
- - text: Каждый из трех элементов флажка должен быть вложен в свой собственный элемент label .
- testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own label element.");'
- - text: 'Убедитесь, что каждый из ваших элементов label имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/label>/g) && code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.russian.md
index 5f5afe1840..8c5b814fd0 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.russian.md
@@ -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
- Вы можете использовать radio buttons для вопросов, в которых вы хотите, чтобы пользователь дал вам один ответ из нескольких вариантов. Кнопки радио - это тип input . Каждая из ваших радиокнопок может быть вложена в свой собственный элемент label . Обернув элемент input в элемент label вы автоматически свяжете радиокнопку с окружающим ее элементом label. Все связанные радиокнопки должны иметь одинаковый атрибут name для создания группы переключателей. Создавая группу радиокнопок, при выборе любой одной радиокнопки автоматически отменяется выбор других радиокнопок в пределах одной группы, разрешая пользователю только один ответ. Вот пример переключателя:
<label> <input type = "radio" name = "indoor-outdoor"> Indoor </label>
Рекомендуется использовать атрибут for тега label со значением, которое соответствует значению атрибута idinput элемента. Это позволяет вспомогательным технологиям создавать взаимосвязанные отношения между label и элементом input . Например:
<label for = "indoor"> <input id = "indoor" type = "radio" name = "indoor-outdoor"> Indoor </label>
+
+Вы можете использовать radio buttons для вопросов, в которых вы хотите, чтобы пользователь дал вам один ответ из нескольких вариантов. Кнопки радио - это тип input . Каждая из ваших радиокнопок может быть вложена в свой собственный элемент label . Обернув элемент input в элемент label вы автоматически свяжете радиокнопку с окружающим ее элементом label. Все связанные радиокнопки должны иметь одинаковый атрибут name для создания группы переключателей. Создавая группу радиокнопок, при выборе любой одной радиокнопки автоматически отменяется выбор других радиокнопок в пределах одной группы, разрешая пользователю только один ответ. Вот пример переключателя:
<label> <input type = "radio" name = "indoor-outdoor"> Indoor </label>
Рекомендуется использовать атрибут for тега label со значением, которое соответствует значению атрибута idinput элемента. Это позволяет вспомогательным технологиям создавать взаимосвязанные отношения между label и элементом input . Например:
<label for = "indoor"> <input id = "indoor" type = "radio" name = "indoor-outdoor"> Indoor </label>
+
## Instructions
- Добавьте пару радиокнопок в вашу форму, каждая из которых вложена в свой собственный элемент label. Нужно иметь возможность indoor а у другого - возможность outdoor . Оба должны совместно использовать атрибут nameindoor-outdoor чтобы создать группу радиокнопок.
+
+Добавьте пару радиокнопок в вашу форму, каждая из которых вложена в свой собственный элемент label. Нужно иметь возможность indoor а у другого - возможность outdoor . Оба должны совместно использовать атрибут nameindoor-outdoor чтобы создать группу радиокнопок.
+
## Tests
```yml
tests:
- - text: На вашей странице должно быть два элемента переключателя.
- testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
- - text: Дайте ваше радио кнопки на name атрибут indoor-outdoor .
- testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the name attribute of indoor-outdoor.");'
- - text: Каждый из ваших двух элементов переключателя должен быть вложен в свой собственный элемент label .
- testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own label element.");'
- - text: 'Убедитесь, что каждый из ваших элементов label имеет закрывающий тег.'
- testString: 'assert((code.match(/<\/label>/g) && code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-text-field.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-text-field.russian.md
index e2590eeeae..d2fb8df33e 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-text-field.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-a-text-field.russian.md
@@ -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
- Теперь давайте создадим веб-форму. Элементы ввода - удобный способ ввода данных от пользователя. Вы можете создать текстовый ввод следующим образом: <input type="text"> Обратите внимание, что input элементы самозакрываются.
+
+Теперь давайте создадим веб-форму. Элементы ввода - удобный способ ввода данных от пользователя. Вы можете создать текстовый ввод следующим образом: <input type="text"> Обратите внимание, что input элементы самозакрываются.
+
## Instructions
- Создайте input элемент типа text ниже списков.
+
+Создайте input элемент типа text ниже списков.
+
## Tests
```yml
tests:
- - text: Ваше приложение должно иметь input элемент типа text .
- testString: 'assert($("input[type=text]").length > 0, "Your app should have an input element of type text.");'
+ - text: Your app should have an input element of type text.
+ testString: assert($("input[type=text]").length > 0);
```
@@ -56,14 +61,34 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.russian.md
index 68cfe646e3..3b4538356a 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.russian.md
@@ -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
- HTML имеет еще один специальный элемент для создания ordered lists или нумерованных списков. Упорядоченные списки начинаются с элемента <ol> , за которым следует любое количество элементов <li>. Наконец, упорядоченные списки закрываются с помощью </ol> Например:
создаст нумерованный список «Гарфилд» и «Сильвестр».
+
+HTML имеет еще один специальный элемент для создания ordered lists или нумерованных списков. Упорядоченные списки начинаются с элемента <ol> , за которым следует любое количество элементов <li>. Наконец, упорядоченные списки закрываются с помощью </ol> Например:
создаст нумерованный список «Гарфилд» и «Сильвестр».
+
## Instructions
- Создайте упорядоченный список из 3 лучших вещей, которые кошки ненавидят больше всего.
+
+Создайте упорядоченный список из 3 лучших вещей, которые кошки ненавидят больше всего.
+
## 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: У вас должен быть только один элемент ul .
- testString: 'assert.equal($("ul").length, 1, "You should have only one ul element.");'
- - text: У вас должен быть только один элемент ol .
- testString: 'assert.equal($("ol").length, 1, "You should have only one ol element.");'
- - text: У вас должно быть три элемента li в вашем элементе ul .
- testString: 'assert.equal($("ul li").length, 3, "You should have three li elements within your ul element.");'
- - text: У вас должно быть три элемента li внутри вашего элемента ol .
- testString: 'assert.equal($("ol li").length, 3, "You should have three li elements within your ol element.");'
- - text: 'Убедитесь, что ваш элемент ul имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/
/g).length, "Make sure your ul element has a closing tag.");'
- - text: 'Убедитесь, что ваш элемент ol имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(//g).length, "Make sure your ol element has a closing tag.");'
- - text: 'Убедитесь, что ваш элемент li имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/li>/g) && code.match(/
/g).length, "Make sure your li 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 ul element.
+ testString: assert.equal($("ul").length, 1);
+ - text: You should have only one ol element.
+ testString: assert.equal($("ol").length, 1);
+ - text: You should have three li elements within your ul element.
+ testString: assert.equal($("ul li").length, 3);
+ - text: You should have three li elements within your ol element.
+ testString: assert.equal($("ol li").length, 3);
+ - text: Make sure your ul element has a closing tag.
+ testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/
/g).length);
+ - text: Make sure your ol element has a closing tag.
+ testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(//g).length);
+ - text: Make sure your li element has a closing tag.
+ testString: assert(code.match(/<\/li>/g) && code.match(/
/g).length);
+ - text: The li elements in your unordered list should not be empty.
+ testString: $('ul li').each((i, val) => assert(val.textContent.replace(/\s/g, '')));
+ - text: The li 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:
-
-
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.russian.md
index b0011e57b3..a198cd259d 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.russian.md
@@ -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
- Упражнения до сих пор охватывали конкретные элементы HTML и их использование. Однако есть несколько элементов, которые дают общую структуру вашей странице и должны быть включены в каждый HTML-документ. В верхней части документа вам нужно указать браузеру, какую версию HTML использует ваша страница. HTML развивающийся язык и регулярно обновляется. Большинство браузеров поддерживают самую последнюю спецификацию—HTML5, но старые веб-страницы могут использовать предыдущие версии языка. Чтобы сообщить браузеру какую версию HTML использовать нужно добавить следующий тег в первую строку вашего документа <!DOCTYPE ...> , где « ... » - это версия HTML. Для HTML5 вы используете <!DOCTYPE html> . ! и DOCTYPE должно быть написано заглавными буквами, особенно для старых браузеров. Далее, весь ваш HTML-код необходимо обернуть в теги html . Открытие <html> идет непосредственно под линией <!DOCTYPE html> , а закрытие </html> идет в конце страницы. Вот пример структуры страницы:
<! DOCTYPE html> <HTML> <! - Ваш HTML-код идет здесь -> </ Html>
+
+Упражнения до сих пор охватывали конкретные элементы HTML и их использование. Однако есть несколько элементов, которые дают общую структуру вашей странице и должны быть включены в каждый HTML-документ. В верхней части документа вам нужно указать браузеру, какую версию HTML использует ваша страница. HTML развивающийся язык и регулярно обновляется. Большинство браузеров поддерживают самую последнюю спецификацию—HTML5, но старые веб-страницы могут использовать предыдущие версии языка. Чтобы сообщить браузеру какую версию HTML использовать нужно добавить следующий тег в первую строку вашего документа <!DOCTYPE ...> , где « ... » - это версия HTML. Для HTML5 вы используете <!DOCTYPE html> . ! и DOCTYPE должно быть написано заглавными буквами, особенно для старых браузеров. Далее, весь ваш HTML-код необходимо обернуть в теги html . Открытие <html> идет непосредственно под линией <!DOCTYPE html> , а закрытие </html> идет в конце страницы. Вот пример структуры страницы:
<! DOCTYPE html> <HTML> <! - Ваш HTML-код идет здесь -> </ Html>
+
## Instructions
- Добавьте тег DOCTYPE для HTML5 в начало пустого документа HTML в редакторе кода. Под ним добавьте открывающие и закрывающие теги html , которые обертывают вокруг элемента h1 . Заголовок может включать любой текст.
+
+Добавьте тег DOCTYPE для HTML5 в начало пустого документа HTML в редакторе кода. Под ним добавьте открывающие и закрывающие теги html , которые обертывают вокруг элемента h1 . Заголовок может включать любой текст.
+
## Tests
```yml
tests:
- - text: Ваш код должен содержать <!DOCTYPE html> .
- testString: 'assert(code.match(//gi), "Your code should include a <!DOCTYPE html> tag.");'
- - text: Должен быть один элемент html .
- testString: 'assert($("html").length == 1, "There should be one html element.");'
- - text: Теги html должны охватывать один элемент h1 .
- testString: 'assert(code.match(/\s*?
\s*?.*?\s*?<\/h1>\s*?<\/html>/gi), "The html tags should wrap around one h1 element.");'
+ - text: Your code should include a <!DOCTYPE html> tag.
+ testString: assert(code.match(//gi));
+ - text: There should be one html element.
+ testString: assert($('html').length == 1);
+ - text: The html tags should wrap around one h1 element.
+ testString: assert(code.match(/\s*?
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.russian.md
index 7ef302ae1b..ca6f8b7c6a 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.russian.md
@@ -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
- Вы можете добавить еще один уровень организации в свой HTML-документ в тегах html с элементами head и body . Любая разметка с информацией о Вашей странице будет идти в head метку. Тогда любая метка с содержимым страницы (то, что отображается для пользователя) войдет в тег body . Элементы метаданных, такие как link , meta , title и style , обычно входят в элемент head . Вот пример макета страницы:
+
+Вы можете добавить еще один уровень организации в свой HTML-документ в тегах html с элементами head и body . Любая разметка с информацией о Вашей странице будет идти в head метку. Тогда любая метка с содержимым страницы (то, что отображается для пользователя) войдет в тег body . Элементы метаданных, такие как link , meta , title и style , обычно входят в элемент head . Вот пример макета страницы:
+
## Instructions
- Отредактируйте разметку, чтобы появилась head и body . Элемент head должен включать только title , а элемент body должен включать только h1 и p .
+
+Отредактируйте разметку, чтобы появилась head и body . Элемент head должен включать только title , а элемент body должен включать только h1 и p .
+
## Tests
```yml
tests:
- - text: На странице должен быть только один элемент head .
- testString: 'assert($("head").length == 1, "There should be only one head element on the page.");'
- - text: На странице должен быть только один элемент body .
- testString: 'assert($("body").length == 1, "There should be only one body element on the page.");'
- - text: Элемент head должен быть дочерним элементом html .
- testString: 'assert($("html").children("head").length == 1, "The head element should be a child of the html element.");'
- - text: Элемент body должен быть дочерним элементом html .
- testString: 'assert($("html").children("body").length == 1, "The body element should be a child of the html element.");'
- - text: Элемент head должен обернуть элемент title .
- testString: 'assert(code.match(/\s*?\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
+
+
+
The best page ever
+
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.
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/delete-html-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/delete-html-elements.russian.md
index 9fb7a8a141..5fbec3d56c 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/delete-html-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/delete-html-elements.russian.md
@@ -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
- Наш телефон не имеет большого пространства. Удалим ненужные элементы, чтобы мы могли начать строить CatPhotoApp.
+
+Наш телефон не имеет большого пространства. Удалим ненужные элементы, чтобы мы могли начать строить CatPhotoApp.
+
## Instructions
- Удалите элемент h1 чтобы мы могли упростить наше представление.
+
+Удалите элемент h1 чтобы мы могли упростить наше представление.
+
## Tests
```yml
tests:
- - text: Удалите элемент h1 .
- testString: 'assert(!code.match(/
/gi) && !code.match(/<\/h1>/gi), "Delete your h1 element.");'
- - text: Оставьте свой элемент h2 на странице.
- testString: 'assert(code.match(/
[\w\W]*<\/h2>/gi), "Leave your h2 element on the page.");'
- - text: Оставьте свой элемент p на странице.
- testString: 'assert(code.match(/
[\w\W]*<\/p>/gi), "Leave your p element on the page.");'
+ - text: Delete your h1 element.
+ testString: assert(!code.match(/
/gi) && !code.match(/<\/h1>/gi));
+ - text: Leave your h2 element on the page.
+ testString: assert(code.match(/
[\w\W]*<\/h2>/gi));
+ - text: Leave your p element on the page.
+ testString: assert(code.match(/
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
"
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.russian.md
index f4a540146e..050e8ea902 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.russian.md
@@ -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: Заполните пустое поле текстом-заполнителем
---
-## Описание
- Веб-разработчики традиционно используют lorem ipsum text в качестве текста-заполнителя. Текст «lorem ipsum» случайным образом взят из знаменитого отрывка Цицерона Древнего Рима. Текст "lorem ipsum" использовался в качестве текста-заполнителя наборщиками текста с 16 века, и эта традиция продолжается на веб-страницах. Однако, 5 веков - это достаточно долго. Раз уж мы создаем CatPhotoApp, давайте использовать что-то под названием kitty ipsum text .
+## Description
+
+Веб-разработчики традиционно используют lorem ipsum text в качестве текста-заполнителя. Текст «lorem ipsum» случайным образом взят из знаменитого отрывка Цицерона Древнего Рима. Текст "lorem ipsum" использовался в качестве текста-заполнителя наборщиками текста с 16 века, и эта традиция продолжается на веб-страницах. Однако, 5 веков - это достаточно долго. Раз уж мы создаем CatPhotoApp, давайте использовать что-то под названием kitty ipsum text .
+
-## Инструкции
- Замените текст внутри вашего элемента 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. kitty: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
+## Instructions
+
+Замените текст внутри вашего элемента 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. kitty: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
+
-## Тесты
+## Tests
```yml
tests:
- - text: Ваш элемент p должен содержать первые несколько слов предоставленного kitty ipsum text .
- testString: 'assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), "Your p element should contain the first few words of the provided kitty ipsum text.");'
+ - text: Your p element should contain the first few words of the provided kitty ipsum text.
+ testString: assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()));
```
-## Исходной код
+## Challenge Seed
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.russian.md
index 5c35788160..a87b70fc57 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.russian.md
@@ -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
---
-## Описание
- В течение следующих нескольких уроков мы по частям построим HTML5 веб-приложение с картинками котят. Элемент h2, который вы добавите на этом шаге, добавит заголовок второго уровня на веб-страницу. Этот элемент сообщает браузеру информацию о структуре вашего веб-сайта. Элементы h1 часто используются для основных заголовков, а элементы h2 обычно используются для подзаголовков. Существуют также элементы h3 , h4 , h5 и h6 для обозначения разных уровней подзаголовков.
+## Description
+
+В течение следующих нескольких уроков мы по частям построим HTML5 веб-приложение с картинками котят. Элемент h2, который вы добавите на этом шаге, добавит заголовок второго уровня на веб-страницу. Этот элемент сообщает браузеру информацию о структуре вашего веб-сайта. Элементы h1 часто используются для основных заголовков, а элементы h2 обычно используются для подзаголовков. Существуют также элементы h3 , h4 , h5 и h6 для обозначения разных уровней подзаголовков.
+
-## Инструкции
- Добавьте тег h2 с текстом «CatPhotoApp», чтобы создать второй element(элемент) HTML под element(элементом) h1 с текстом «Hello World» .
+## Instructions
+
+Добавьте тег h2 с текстом «CatPhotoApp», чтобы создать второй element(элемент) HTML под element(элементом) h1 с текстом «Hello World» .
+
-## Тесты
+## Tests
```yml
tests:
- - text: Создайте элемент h2 .
- testString: 'assert(($("h2").length > 0), "Create an h2 element.");'
- - text: 'Убедитесь, что ваш элемент h2 имеет конечный тег.'
- testString: 'assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/
/g).length, "Make sure your h2 element has a closing tag.");'
- - text: Ваш элемент h2 должен иметь текст «CatPhotoApp».
- testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your h2 element should have the text "CatPhotoApp".");'
- - text: Ваш элемент h1 должен иметь текст «Hello World».
- testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your h1 element should have the text "Hello World".");'
+ - text: Create an h2 element.
+ testString: assert(($("h2").length > 0));
+ - text: Make sure your h2 element has a closing tag.
+ testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/
/g).length);
+ - text: Your h2 element should have the text "CatPhotoApp".
+ testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));
+ - text: Your h1 element should have the text "Hello World".
+ testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));
```
-## Исходной код
+## Challenge Seed
@@ -42,14 +47,6 @@ tests:
-
-
-## Решение
-
-
-```js
-// solution required
-```
-
+## Solution
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.russian.md
index 0a8b505441..32a38b40f7 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.russian.md
@@ -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: Передайте информацию с помощью элемента "параграф"
---
-## Описание
- Для создания текста параграфа веб-сайта лучше использовать элемент p. p - это сокращение от слова «paragraph» (параграф). Вы можете создать параграф с этим элементом следующим образом: <p>I'm a p tag!</p>
+## Description
+
+Для создания текста параграфа веб-сайта лучше использовать элемент p. p - это сокращение от слова «paragraph» (параграф). Вы можете создать параграф с этим элементом следующим образом: <p>I'm a p tag!</p>
+
-## Инструкции
- Создайте p элемент под вашим элементом h2 с текстом «Hello Paragraph».
+## Instructions
+
+Создайте p элемент под вашим элементом h2 с текстом «Hello Paragraph».
+
-## Тесты
+## Tests
```yml
tests:
- - text: Создайте элемент p .
- testString: 'assert(($("p").length > 0), "Create a p element.");'
- - text: Ваш элемент p должен иметь текст «Hello Paragraph».
- testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your p element should have the text "Hello Paragraph".");'
- - text: 'Убедитесь, что ваш элемент p имеет конечный тег.'
- testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/
p element has a closing tag.");'
+ - text: Your code should have a valid p element.
+ testString: assert(($("p").length > 0));
+ - text: Your p element should have the text "Hello Paragraph".
+ testString: assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()));
+ - text: Make sure your p element has a closing tag.
+ testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.russian.md
index c1b56e9ccb..1b52110ef5 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.russian.md
@@ -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
- HTML5 вводит более описательные HTML-теги. К ним относятся header , footer , nav , video , article , section и другие. Эти теги упрощают чтение вашего HTML, а также помогают в поисковой оптимизации (SEO) и доступности. main тег HTML5 помогает поисковым системам и другим разработчикам находить основное содержимое вашей страницы. Заметка Многие из новых тегов HTML5 и их преимущества описаны в разделе «Прикладная доступность».
+
+HTML5 вводит более описательные HTML-теги. К ним относятся header , footer , nav , video , article , section и другие. Эти теги упрощают чтение вашего HTML, а также помогают в поисковой оптимизации (SEO) и доступности. main тег HTML5 помогает поисковым системам и другим разработчикам находить основное содержимое вашей страницы. Заметка Многие из новых тегов HTML5 и их преимущества описаны в разделе «Прикладная доступность».
+
## Instructions
- Создайте второй элемент 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: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Оберните абзацы с помощью main и закрывающего main тега.
+
+Создайте второй элемент 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: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Оберните абзацы с помощью main и закрывающего main тега.
+
## Tests
```yml
tests:
- - text: Вам нужны 2 p элемента с текстом Китти Ipsum.
- testString: 'assert($("p").length > 1, "You need 2 p elements with Kitty Ipsum text.");'
- - text: 'Убедитесь, что каждый из ваших p элементов имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/
p elements has a closing tag.");'
- - text: ''
- testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your p element should contain the first few words of the provided additional kitty ipsum text.");'
- - text: Ваш код должен иметь один main элемент.
- testString: 'assert($("main").length === 1, "Your code should have one main element.");'
- - text: main элемент должен содержать два элемента абзаца в качестве детей.
- testString: 'assert($("main").children("p").length === 2, "The main element should have two paragraph elements as children.");'
- - text: main тег открытия должен появиться перед тегом первого абзаца.
- testString: 'assert(code.match(/\s*?
/g), "The opening main tag should come before the first paragraph tag.");'
- - text: Закрывающий main тег должен появиться после второго тега абзаца закрытия.
- testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing main tag should come after the second closing paragraph tag.");'
+ - text: You need 2 p elements with Kitty Ipsum text.
+ testString: assert($("p").length > 1);
+ - text: Make sure each of your p elements has a closing tag.
+ testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/
p element should contain the first few words of the provided additional kitty ipsum text.
+ testString: assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()));
+ - text: Your code should have one main element.
+ testString: assert($('main').length === 1);
+ - text: The main element should have two paragraph elements as children.
+ testString: assert($("main").children("p").length === 2);
+ - text: The opening main tag should come before the first paragraph tag.
+ testString: assert(code.match(/\s*?
/g));
+ - text: The closing main tag should come after the second closing paragraph tag.
+ testString: assert(code.match(/<\/p>\s*?<\/main>/g));
```
@@ -50,14 +55,17 @@ tests:
-
-
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.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.russian.md
index 8faf21d317..b6b8b54708 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.russian.md
@@ -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
-
- Вы можете использовать элементы anchor для ссылки на контент вне вашей веб-страницы. Элементам anchor нужен адрес веб-сайта назначения, называемый атрибутом href. Им также нужен якорный текст. Вот пример: <a href="https://freecodecamp.org">this links to freecodecamp.org</a> Затем ваш браузер отобразит текст «это ссылки на freecodecamp.org» в качестве ссылки, которую вы можете щелкнуть. И эта ссылка приведет вас к веб-адресу https://www.freecodecamp.org .
+
+Вы можете использовать элементы anchor для ссылки на контент вне вашей веб-страницы. Элементам anchor нужен адрес веб-сайта назначения, называемый атрибутом href. Им также нужен якорный текст. Вот пример: <a href="https://freecodecamp.org">this links to freecodecamp.org</a> Затем ваш браузер отобразит текст «это ссылки на freecodecamp.org» в качестве ссылки, которую вы можете щелкнуть. И эта ссылка приведет вас к веб-адресу https://www.freecodecamp.org .
+
## Instructions
-Создайте элемент, который ссылается на http://freecatphotoapp.com и имеет «фотографии котят» в качестве его якорного текста.
-
+
+Создайте элемент, который ссылается на и имеет «фотографии котят» в качестве его якорного текста.
+
## Tests
```yml
tests:
-
- - text: Ваш элемент a должен иметь якорный текст «cat photos».
-
- testString: 'assert((/cat photos/gi).test($("a").text()), "Your a element should have the anchor text of "cat photos".");'
- - text: 'Вам нужно создать a элемент, являющийся ссылкой на http://freecatphotoapp .com'
- testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an a element that links to http://freecatphotoapp.com");'
- - text: 'Убедитесь, что элемент a имеет закрывающий тег'
- testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/a element has a closing tag.");'
+ - text: Your a element should have the anchor text of "cat photos".
+ testString: assert((/cat photos/gi).test($("a").text()));
+ - text: You need an a element that links to http://freecatphotoapp.com
+ testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));
+ - text: Make sure your a element has a closing tag.
+ testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/
-
-
## Solution
-```js
-// solution required
+```html
+
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.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.russian.md
index 45df4f18cf..55bd9a6892 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.russian.md
@@ -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
- Элементы привязки также могут использоваться для создания внутренних ссылок для перехода к различным разделам веб-страницы. Чтобы создать внутреннюю ссылку, вы назначаете атрибут href ссылки на хэш-символ # плюс значение атрибута id для элемента, к которому вы хотите внутренне связать, обычно дальше вниз по странице. Затем вам нужно добавить тот же атрибут id к элементу, к которому вы привязываетесь. id - это атрибут, который однозначно описывает элемент. Ниже приведен пример внутренней привязной ссылки и ее целевого элемента:
Когда пользователи нажимают ссылку «Контакты», они будут отправлены в раздел веб-страницы с элементом заголовка « Контакты» .
+
+Элементы привязки также могут использоваться для создания внутренних ссылок для перехода к различным разделам веб-страницы. Чтобы создать внутреннюю ссылку, вы назначаете атрибут href ссылки на хэш-символ # плюс значение атрибута id для элемента, к которому вы хотите внутренне связать, обычно дальше вниз по странице. Затем вам нужно добавить тот же атрибут id к элементу, к которому вы привязываетесь. id - это атрибут, который однозначно описывает элемент. Ниже приведен пример внутренней привязной ссылки и ее целевого элемента:
Когда пользователи нажимают ссылку «Контакты», они будут отправлены в раздел веб-страницы с элементом заголовка « Контакты» .
+
## Instructions
- Измените внешнюю ссылку на внутреннюю ссылку, изменив атрибут href на «#footer» и текст «Фотографии кошки» на «Перейти к нижнему». Удалите атрибут target="_blank" из тега привязки, поскольку это заставляет связанный документ открываться на вкладке нового окна. Затем добавьте атрибут id со значением «footer» в элемент <footer> в нижней части страницы.
+
+Измените внешнюю ссылку на внутреннюю ссылку, изменив атрибут href на «#footer» и текст «Фотографии кошки» на «Перейти к нижнему». Удалите атрибут target="_blank" из тега привязки, поскольку это заставляет связанный документ открываться на вкладке нового окна. Затем добавьте атрибут id со значением «footer» в элемент <footer> в нижней части страницы.
+
## Tests
```yml
tests:
- - text: На вашей странице должен быть только один тег привязки.
- testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");'
- - text: На вашей странице должен быть только один footer тег.
- testString: 'assert($("footer").length == 1, "There should be only one footer tag on your page.");'
- - text: 'Тег a должен иметь атрибут href установленный на «#footer».'
- testString: 'assert($("a").eq(0).attr("href") == "#footer", "The a tag should have an href attribute set to "#footer".");'
- - text: Тег a должен не иметь target атрибута
- testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The a tag should not have a target attribute");'
- - text: Текст должен быть «Перейти к низу». a
- testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The a text should be "Jump to Bottom".");'
- - text: Тег footer должен иметь атрибут id установленный в «нижний колонтитул».
- testString: 'assert($("footer").eq(0).attr("id") == "footer", "The footer tag should have an id 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 footer tag on your page.
+ testString: assert($('footer').length == 1);
+ - text: The a tag should have an href attribute set to "#footer".
+ testString: assert($('a').eq(0).attr('href') == "#footer");
+ - text: The a tag should not have a target attribute
+ testString: assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true);
+ - text: The a text should be "Jump to Bottom".
+ testString: assert($('a').eq(0).text().match(/Jump to Bottom/gi));
+ - text: The footer tag should have an id attribute set to "footer".
+ testString: assert($('footer').eq(0).attr('id') == "footer");
```
@@ -60,14 +65,27 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
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.
+
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.
+
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.
+
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.
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.russian.md
index c0209eaec6..410bf9d456 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.russian.md
@@ -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
- Иногда вы хотите добавить элементы на свой веб - сайт , прежде чем вы знаете , где они будут ссылаться. a Это также удобно, когда вы меняете поведение ссылки с помощью JavaScript , о чем мы узнаем позже.
+
+Иногда вы хотите добавить элементы на свой веб - сайт , прежде чем вы знаете , где они будут ссылаться. a Это также удобно, когда вы меняете поведение ссылки с помощью JavaScript , о чем мы узнаем позже.
+
## Instructions
- Текущее значение атрибута href - это ссылка, которая указывает на «http://freecatphotoapp.com». Замените значение атрибута href символом # , также известным как хэш-символ, чтобы создать мертвую ссылку. Например: href="#"
+
+Текущее значение атрибута href - это ссылка, которая указывает на «http://freecatphotoapp.com». Замените значение атрибута href символом # , также известным как хэш-символ, чтобы создать мертвую ссылку. Например: href="#"
+
## Tests
```yml
tests:
- - text: 'Ваш элемент должен быть мертвой ссылке с значением ahref атрибута установлено значение «#».'
- testString: 'assert($("a").attr("href") === "#", "Your a element should be a dead link with the value of the href attribute set to "#".");'
+ - text: Your a element should be a dead link with the value of the href attribute set to "#".
+ testString: assert($("a").attr("href") === "#");
```
@@ -44,14 +49,21 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
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.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.russian.md
index 8a83a0220f..373e4a9e38 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.russian.md
@@ -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
- Вы можете вставлять ссылки в другие текстовые элементы.
<Р> Вот вам ссылка <a target="_blank" href="http://freecodecamp.org"> на freecodecamp.org </a> для вас. </ Р>
Давайте разберем пример: Обычный текст завернут в элемент p : <p> Here's a ... for you to follow. </p> Следующий элемент anchor<a> (для которого требуется закрывающий тег </a> ): <a> ... </a>target - это атрибут тега привязки, который указывает, где можно открыть ссылку, а значение "_blank" указывает на открытие ссылки на новой вкладке. href является атрибутом тега привязки, который содержит URL-адрес связь: <a href="http://freecodecamp.org"> ... </a> В тексте, «ссылка на freecodecamp.org» , в элементе anchor text , который называется anchor text , будет отображаться ссылка: <a href=" ... ">link to freecodecamp.org</a> Окончательный результат примера будет выглядеть так:
+
+Вы можете вставлять ссылки в другие текстовые элементы.
<Р> Вот вам ссылка <a target="_blank" href="http://freecodecamp.org"> на freecodecamp.org </a> для вас. </ Р>
Давайте разберем пример: Обычный текст завернут в элемент p : <p> Here's a ... for you to follow. </p> Следующий элемент anchor<a> (для которого требуется закрывающий тег </a> ): <a> ... </a>target - это атрибут тега привязки, который указывает, где можно открыть ссылку, а значение "_blank" указывает на открытие ссылки на новой вкладке. href является атрибутом тега привязки, который содержит URL-адрес связь: <a href="http://freecodecamp.org"> ... </a> В тексте, «ссылка на freecodecamp.org» , в элементе anchor text , который называется anchor text , будет отображаться ссылка: <a href=" ... ">link to freecodecamp.org</a> Окончательный результат примера будет выглядеть так:
+
## Instructions
- Теперь гнездо уже существующий a элемент в новом p элемент (только после того, как существующего main элемента). В новом абзаце должен быть текст с надписью «Просмотр фотографий кошек», где «фотографии кошек» - это ссылка, а остальная часть текста - простой текст.
+
+Теперь гнездо уже существующий a элемент в новом p элемент (только после того, как существующего main элемента). В новом абзаце должен быть текст с надписью «Просмотр фотографий кошек», где «фотографии кошек» - это ссылка, а остальная часть текста - простой текст.
+
## Tests
```yml
tests:
- - text: 'Вам нужно a элемент , который связывает с «http://freecatphotoapp.com».'
- testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an a element that links to "http://freecatphotoapp.com".");'
- - text: Ваш элемент должен иметь якорный текст «кошачьи фотографии» a
- testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your a element should have the anchor text of "cat photos"");'
- - text: 'Создать новый p элемент вокруг вашего a элементе. Там должно быть , по крайней мере , 3 всего p теги в вашем HTML коде.'
- testString: 'assert($("p") && $("p").length > 2, "Create a new p element around your a element. There should be at least 3 total p tags in your HTML code.");'
- - text: Ваш элемент должен быть вложен в вашем новом ap элемент.
- testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")), "Your a element should be nested within your new p element.");'
- - text: Ваш элемент p должен иметь текст «Просмотреть больше» (с пробелом после него).
- 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 p element should have the text "View more " (with a space after it).");'
- - text: Ваш элемент не должен иметь текст «Больше». a
- testString: 'assert(!$("a").text().match(/View\smore/gi), "Your a element should not have the text "View more".");'
- - text: 'Убедитесь, что каждый из ваших p элементов имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/p>/g) && code.match(/
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.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.russian.md
index f1601edfe7..ae3e30fd25 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.russian.md
@@ -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
- Элемент div , также известный как элемент разделения, является контейнером общего назначения для других элементов. Элемент div вероятно, является наиболее часто используемым HTML-элементом. Как и любой другой несамозакрывающийся элемент, вы можете открыть элемент div с помощью <div> и закрыть его в другой строке с помощью </div> .
+
+Элемент div , также известный как элемент разделения, является контейнером общего назначения для других элементов. Элемент div вероятно, является наиболее часто используемым HTML-элементом. Как и любой другой несамозакрывающийся элемент, вы можете открыть элемент div с помощью <div> и закрыть его в другой строке с помощью </div> .
+
## Instructions
- Гнездо ваших «Вещей кошек любят» и «Вещи, которые ненавидят кошек», перечисляет все в одном элементе div . Подсказка: Попробуйте поместить ваше открытие div тега выше ваших «Things кошек любит» p элемент и ваше закрытие div тег после закрытия ol тега , так что оба ваших списков находятся в пределах одного div .
+
+Гнездо ваших «Вещей кошек любят» и «Вещи, которые ненавидят кошек», перечисляет все в одном элементе div . Подсказка: Попробуйте поместить ваше открытие div тега выше ваших «Things кошек любит» p элемент и ваше закрытие div тег после закрытия ol тега , так что оба ваших списков находятся в пределах одного div .
+
## Tests
```yml
tests:
- - text: Гнездо ваших элементов p внутри вашего элемента div .
- testString: 'assert($("div").children("p").length > 1, "Nest your p elements inside your div element.");'
- - text: Вставьте свой элемент ul внутри элемента div .
- testString: 'assert($("div").children("ul").length > 0, "Nest your ul element inside your div element.");'
- - text: Гнездо вашего элемента ol внутри вашего элемента div .
- testString: 'assert($("div").children("ol").length > 0, "Nest your ol element inside your div element.");'
- - text: 'Убедитесь, что ваш элемент div имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/
/g).length, "Make sure your div element has a closing tag.");'
+ - text: Nest your p elements inside your div element.
+ testString: assert($("div").children("p").length > 1);
+ - text: Nest your ul element inside your div element.
+ testString: assert($("div").children("ul").length > 0);
+ - text: Nest your ol element inside your div element.
+ testString: assert($("div").children("ol").length > 0);
+ - text: Make sure your div element has a closing tag.
+ testString: assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/
+
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.russian.md
index 4782e28d95..d6294a7869 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.russian.md
@@ -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
---
-## Описание
- Добро пожаловать в курс по HTML от freeCodeCamp. Мы проведем вас через веб-разработку шаг за шагом. Сначала вы начнете с создания простой веб-страницы с использованием HTML. Вы можете редактировать code(код) в code editor(редакторе кода), который встроен в эту веб-страницу. Вы видите <h1>Hello</h1> в редакторе кода? Это element(элемент) HTML. Большинство элементов HTML имеют opening tag(начальный тег) и closing tag(конечный тег). Начальные теги выглядят следующим образом: <h1> Конечные же теги выглядят так: </h1> Единственная разница между начальными и конечными тегами - это слеш вправо после открывающей скобки конечного тега. У каждого упражнения есть тесты, которые вы можете запустить в любое время, нажав кнопку «Запустить тесты». Когда вы пройдете все тесты, вам будет предложено отправить ваше решение и перейти к следующему заданию.
+## Description
+
+Добро пожаловать в курс по HTML от freeCodeCamp. Мы проведем вас через веб-разработку шаг за шагом. Сначала вы начнете с создания простой веб-страницы с использованием HTML. Вы можете редактировать code(код) в code editor(редакторе кода), который встроен в эту веб-страницу. Вы видите <h1>Hello</h1> в редакторе кода? Это element(элемент) HTML. Большинство элементов HTML имеют opening tag(начальный тег) и closing tag(конечный тег). Начальные теги выглядят следующим образом: <h1> Конечные же теги выглядят так: </h1> Единственная разница между начальными и конечными тегами - это слеш вправо после открывающей скобки конечного тега. У каждого упражнения есть тесты, которые вы можете запустить в любое время, нажав кнопку «Запустить тесты». Когда вы пройдете все тесты, вам будет предложено отправить ваше решение и перейти к следующему заданию.
+
-## Инструкции
- Чтобы пройти тест по этому заданию, измените текст своего элемента h1 на «Hello World».
+## Instructions
+
+Чтобы пройти тест по этому заданию, измените текст своего элемента h1 на «Hello World».
+
-## Тесты
+## Tests
```yml
tests:
- - text: Ваш элемент h1 должен иметь текст «Hello World».
- testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your h1 element should have the text "Hello World".");'
+ - text: Your h1 element should have the text "Hello World".
+ testString: assert.isTrue((/hello(\s)+world/gi).test($('h1').text()));
```
-## Исходной код
+## Challenge Seed
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.russian.md
index 17b2f43824..e42542b4d3 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.russian.md
@@ -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
- Вы можете превращать элементы в ссылки, вложив их внутрь элемента a. Вложение вашего изображения внутрь a элемента. Вот пример: <a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a> Не забудьте использовать # в качестве свойства href вашего элемента a для того, чтобы превратить его в мертвую ссылку.
+
+Вы можете превращать элементы в ссылки, вложив их внутрь элемента a. Вложение вашего изображения внутрь a элемента. Вот пример: <a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a> Не забудьте использовать # в качестве свойства href вашего элемента a для того, чтобы превратить его в мертвую ссылку.
+
## Instructions
- Поместите существующий элемент изображения в элемент якорь. Когда вы это сделаете, наведите курсор мыши на изображение. Ваш указатель курсора должен стать указателем на ссылку. Фотография котят теперь является ссылкой.
+
+Поместите существующий элемент изображения в элемент якорь. Когда вы это сделаете, наведите курсор мыши на изображение. Ваш указатель курсора должен стать указателем на ссылку. Фотография котят теперь является ссылкой.
+
## Tests
```yml
tests:
- - text: Вложите существующий элемент img в элемент a .
- testString: 'assert($("a").children("img").length > 0, "Nest the existing img element within an a element.");'
- - text: 'Ваш элемент должен быть мертвой ссылкой a с значением href атрибута равным # .'
- testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your a element should be a dead link with a href attribute set to #.");'
- - text: 'Убедитесь, что каждый из ваших элементов a имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.");'
+ - text: Nest the existing img element within an a element.
+ testString: assert($("a").children("img").length > 0);
+ - text: Your a element should be a dead link with a href attribute set to #.
+ testString: assert(new RegExp("#").test($("a").children("img").parent().attr("href")));
+ - text: Make sure each of your a elements has a closing tag.
+ testString: assert(code.match(/<\/a>/g) && code.match(//g).length === code.match(/
-
-
## Solution
-```js
-// solution required
+```html
+
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.
+
```
+
diff --git a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/uncomment-html.russian.md b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/uncomment-html.russian.md
index a4dc4a2b7d..9eb5742ad7 100644
--- a/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/uncomment-html.russian.md
+++ b/curriculum/challenges/russian/01-responsive-web-design/basic-html-and-html5/uncomment-html.russian.md
@@ -2,35 +2,40 @@
id: bad87fee1348bd9aedf08802
title: Uncomment HTML
challengeType: 0
-videoUrl: ''
+videoUrl: https://scrimba.com/p/pVMPUv/cBmG9T7
+forumTopicId: 18329
localeTitle: Раскомментирование в HTML
---
-## Описание
- Комментирование - это способ, с помощью которого вы можете оставлять комментарии для других разработчиков в своем коде, не влияя на итоговый вывод, который отображается конечному пользователю. Комментирование также является удобным способом сделать код неактивным, не удаляя его целиком. Комментарии в HTML начинаются с <!-- , и заканчиваются с -->
+## Description
+
+Комментирование - это способ, с помощью которого вы можете оставлять комментарии для других разработчиков в своем коде, не влияя на итоговый вывод, который отображается конечному пользователю. Комментирование также является удобным способом сделать код неактивным, не удаляя его целиком. Комментарии в HTML начинаются с <!-- , и заканчиваются с -->
+
-## Инструкции
- Раскомментируйте свои элементы h1 , h2 и p .
+## Instructions
+
+Раскомментируйте свои элементы h1 , h2 и p .
+
-## Тесты
+## Tests
```yml
tests:
- - text: 'Раскомментируйте элемент h1, чтобы он стал видимым на странице.'
- testString: 'assert($("h1").length > 0, "Make your h1 element visible on your page by uncommenting it.");'
- - text: 'Раскомментируйте элемент h2, чтобы он стал видимым на странице.'
- testString: 'assert($("h2").length > 0, "Make your h2 element visible on your page by uncommenting it.");'
- - text: 'Раскомментируйте элемент p, чтобы он стал видимым на странице.'
- testString: 'assert($("p").length > 0, "Make your p element visible on your page by uncommenting it.");'
- - text: 'Проверьте, удалили ли вы все комментирующие теги, т. е. --> .'
- testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ */gi.test(code.replace(/ *
+
+
+
Things cats love:
+
+
cat nip
+
laser pointers
+
lasagna
+
+
Top 3 things cats hate:
+
+
flea treatment
+
thunder
+
other cats
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.russian.md
index b01f191a8f..31e8a057af 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aec908846
title: Create a Bootstrap Headline
challengeType: 0
-videoUrl: ''
+forumTopicId: 16812
localeTitle: Создать заголовок Bootstrap
---
## Description
- Теперь давайте построим что-то с нуля, чтобы практиковать наши навыки HTML, CSS и Bootstrap. Мы построим игровую площадку jQuery, которую мы скоро станем использовать в наших задачах jQuery. Для начала создайте элемент h3 с текстовой jQuery Playground . Разделите свой элемент h3text-primary исходным классом Bootstrap и центрируйте его с помощью text-center Bootstrap.
+
+Теперь давайте построим что-то с нуля, чтобы практиковать наши навыки HTML, CSS и Bootstrap. Мы построим игровую площадку jQuery, которую мы скоро станем использовать в наших задачах jQuery. Для начала создайте элемент h3 с текстовой jQuery Playground . Разделите свой элемент h3text-primary исходным классом Bootstrap и центрируйте его с помощью text-center Bootstrap.
+
## Instructions
-
+
+
## Tests
@@ -18,16 +21,16 @@ localeTitle: Создать заголовок Bootstrap
```yml
tests:
- - text: Добавьте элемент h3 на свою страницу.
- testString: 'assert($("h3") && $("h3").length > 0, "Add a h3 element to your page.");'
- - text: 'Убедитесь, что ваш элемент h3 имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/h3>/g) && code.match(/
/g).length === code.match(/
h3 element has a closing tag.");'
- - text: 'Ваш элемент h3 должен стать цветным, применяя text-primary класса text-primary'
- testString: 'assert($("h3").hasClass("text-primary"), "Your h3 element should be colored by applying the class text-primary");'
- - text: 'Ваш элемент h3 должен быть центрирован, применяя text-center класса'
- testString: 'assert($("h3").hasClass("text-center"), "Your h3 element should be centered by applying the class text-center");'
- - text: Ваш элемент h3 должен иметь текстовый формат jQuery Playground .
- testString: 'assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text()), "Your h3 element should have the text jQuery Playground.");'
+ - text: Add a h3 element to your page.
+ testString: assert($("h3") && $("h3").length > 0);
+ - text: Make sure your h3 element has a closing tag.
+ testString: assert(code.match(/<\/h3>/g) && code.match(/
/g).length === code.match(/
h3 element should be colored by applying the class text-primary
+ testString: assert($("h3").hasClass("text-primary"));
+ - text: Your h3 element should be centered by applying the class text-center
+ testString: assert($("h3").hasClass("text-center"));
+ - text: Your h3 element should have the text jQuery Playground.
+ testString: assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text()));
```
@@ -44,14 +47,13 @@ tests:
-
-
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-bootstrap-row.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-bootstrap-row.russian.md
index d33018a33f..ec90aa1676 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-bootstrap-row.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-bootstrap-row.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9bec908846
title: Create a Bootstrap Row
challengeType: 0
-videoUrl: ''
+forumTopicId: 16813
localeTitle: Создать строку Bootstrap
---
## Description
- Теперь мы создадим строку Bootstrap для наших встроенных элементов. Создайте элемент div под тегом h3 с классом row .
+
+Теперь мы создадим строку Bootstrap для наших встроенных элементов. Создайте элемент div под тегом h3 с классом row .
+
## Instructions
-
+
+
## Tests
@@ -18,14 +21,14 @@ localeTitle: Создать строку Bootstrap
```yml
tests:
- - text: Добавьте элемент div ниже вашего элемента h3 .
- testString: 'assert(($("div").length > 1) && ($("div.row h3.text-primary").length == 0) && ($("div.row + h3.text-primary").length == 0) && ($("h3.text-primary + div.row").length > 0), "Add a div element below your h3 element.");'
- - text: Ваш элемент div должен иметь row класса
- testString: 'assert($("div").hasClass("row"), "Your div element should have the class row");'
- - text: Ваш row div должен быть вложен в container-fluid div
- testString: 'assert($("div.container-fluid div.row").length > 0, "Your row div should be nested inside the container-fluid div");'
- - text: 'Убедитесь, что ваш элемент div имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div element has a closing tag.");'
+ - text: Add a div element below your h3 element.
+ testString: assert(($("div").length > 1) && ($("div.row h3.text-primary").length == 0) && ($("div.row + h3.text-primary").length == 0) && ($("h3.text-primary + div.row").length > 0));
+ - text: Your div element should have the class row
+ testString: assert($("div").hasClass("row"));
+ - text: Your row div should be nested inside the container-fluid div
+ testString: assert($("div.container-fluid div.row").length > 0);
+ - text: Make sure your div element has a closing tag.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.russian.md
index 740aa366ea..68a4e9fff0 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aec908852
title: Create a Class to Target with jQuery Selectors
challengeType: 0
-videoUrl: ''
+forumTopicId: 16815
localeTitle: Создание класса для цели с помощью селекторов jQuery
---
## Description
- Не каждый класс должен иметь соответствующий CSS. Иногда мы создаем классы только с целью более простого выбора этих элементов с помощью jQuery. Создайте класс для каждого из ваших элементов buttontarget.
+
+Не каждый класс должен иметь соответствующий CSS. Иногда мы создаем классы только с целью более простого выбора этих элементов с помощью jQuery. Создайте класс для каждого из ваших элементов buttontarget.
+
## Instructions
-
+
+
## Tests
@@ -18,8 +21,8 @@ localeTitle: Создание класса для цели с помощью с
```yml
tests:
- - text: Примените target класс к каждому из элементов вашей button .
- testString: 'assert($(".target").length > 5, "Apply the target class to each of your button elements.");'
+ - text: Apply the target class to each of your button elements.
+ testString: assert($(".target").length > 5);
```
@@ -55,14 +58,31 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-custom-heading.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-custom-heading.russian.md
index d0eba7a1c8..62add54649 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-custom-heading.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-a-custom-heading.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aede08845
title: Create a Custom Heading
challengeType: 0
-videoUrl: ''
+forumTopicId: 16816
localeTitle: Создание пользовательской рубрики
---
## Description
- Мы сделаем простой заголовок для нашего приложения Cat Photo, поставив заголовок и расслабляющий образ кошки в том же ряду. Помните, что Bootstrap использует гибкую сетчатую систему, которая позволяет легко помещать элементы в строки и задавать относительную ширину каждого элемента. Большинство классов Bootstrap могут быть применены к элементу div . Гнездо вашего первого изображения и вашего элемента h2 пределах одного элемента <div class="row"> . Настройте свой элемент h2 внутри <div class="col-xs-8"> и ваше изображение в <div class="col-xs-4"> чтобы они находились в одной строке. Обратите внимание, как изображение теперь соответствует размеру, подходящему по тексту?
+
+Мы сделаем простой заголовок для нашего приложения Cat Photo, поставив заголовок и расслабляющий образ кошки в том же ряду. Помните, что Bootstrap использует гибкую сетчатую систему, которая позволяет легко помещать элементы в строки и задавать относительную ширину каждого элемента. Большинство классов Bootstrap могут быть применены к элементу div . Гнездо вашего первого изображения и вашего элемента h2 пределах одного элемента <div class="row"> . Настройте свой элемент h2 внутри <div class="col-xs-8"> и ваше изображение в <div class="col-xs-4"> чтобы они находились в одной строке. Обратите внимание, как изображение теперь соответствует размеру, подходящему по тексту?
+
## Instructions
-
+
+
## Tests
@@ -18,14 +21,14 @@ localeTitle: Создание пользовательской рубрики
```yml
tests:
- - text: Ваш элемент h2 и самый верхний элемент img должны вставляться вместе в элемент div с помощью row класса.
- testString: 'assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0, "Your h2 element and topmost img element should both be nested together within a div element with the class row.");'
- - text: Гнездо вашего верхнего элемента img в div с классом col-xs-4 .
- testString: 'assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0, "Nest your topmost img element within a div with the class col-xs-4.");'
- - text: Гнездо вашего элемента h2 в div с классом col-xs-8 .
- testString: 'assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0, "Nest your h2 element within a div with the class col-xs-8.");'
- - text: 'Убедитесь, что каждый из ваших элементов div имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.");'
+ - text: Your h2 element and topmost img element should both be nested together within a div element with the class row.
+ testString: assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0);
+ - text: Nest your topmost img element within a div with the class col-xs-4.
+ testString: assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0);
+ - text: Nest your h2 element within a div with the class col-xs-8.
+ testString: assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0);
+ - text: Make sure each of your div elements has a closing tag.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-bootstrap-wells.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-bootstrap-wells.russian.md
index 989577e3d9..eeaed1a3b8 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-bootstrap-wells.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/create-bootstrap-wells.russian.md
@@ -2,27 +2,31 @@
id: bad87fee1348bd9aec908848
title: Create Bootstrap Wells
challengeType: 0
-videoUrl: ''
+forumTopicId: 16825
localeTitle: Создать бутстрап-колодцы
---
## Description
- У Bootstrap есть класс, который называется well который может создать визуальное ощущение глубины для ваших столбцов. Гнездо один div элемент с классом well в каждом из ваших col-xs-6div элементов.
+
+У Bootstrap есть класс, который называется well который может создать визуальное ощущение глубины для ваших столбцов. Гнездо один div элемент с классом well в каждом из ваших col-xs-6div элементов.
+
## Instructions
-undefined
+
+
+
## Tests
```yml
tests:
- - text: Добавьте div элемент с классом well внутри каждого из div элементов с классом "col-xs-6"
- testString: 'assert($("div.col-xs-6").not(":has(>div.well)").length < 1, "Add a div element with the class well inside each of your div elements with the class "col-xs-6"");'
- - text: ''
- testString: 'assert($("div.row > div.col-xs-6").length > 1, "Nest both of your div elements with the class "col-xs-6" within your div element with the class "row".");'
- - text: ''
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements have closing tags.");'
+ - text: Add a div element with the class well inside each of your div elements with the class "col-xs-6"
+ testString: assert($("div.col-xs-6").not(":has(>div.well)").length < 1);
+ - text: Nest both of your div elements with the class "col-xs-6" within your div element with the class "row".
+ testString: assert($("div.row > div.col-xs-6").length > 1);
+ - text: Make sure all your div elements have closing tags.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.russian.md
index 2202357daf..628a2f7f3e 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1347bd9aedf08845
title: Ditch Custom CSS for Bootstrap
challengeType: 0
-videoUrl: ''
+forumTopicId: 17565
localeTitle: Ditch Custom CSS для Bootstrap
---
## Description
- Мы можем очистить наш код и сделать наше приложение Cat Photo более обычным, используя встроенные стили Bootstrap вместо пользовательских стилей, которые мы создали ранее. Не волнуйтесь - у нас будет много времени, чтобы настроить наш CSS позже. Удалите объявления CSS .red-text , p и .smaller-image из вашего элемента style чтобы только объявления, оставшиеся в вашем элементе style были h2 и thick-green-border . Затем удалите элемент p , содержащий мертвую ссылку. Затем удалите класс red-text из вашего элемента h2 и замените его на text-primary класс Bootstrap. Наконец, удалите класс «меньшего изображения» из вашего первого элемента img и замените его классом img-responsive .
+
+Мы можем очистить наш код и сделать наше приложение Cat Photo более обычным, используя встроенные стили Bootstrap вместо пользовательских стилей, которые мы создали ранее. Не волнуйтесь - у нас будет много времени, чтобы настроить наш CSS позже. Удалите объявления CSS .red-text , p и .smaller-image из вашего элемента style чтобы только объявления, оставшиеся в вашем элементе style были h2 и thick-green-border . Затем удалите элемент p , содержащий мертвую ссылку. Затем удалите класс red-text из вашего элемента h2 и замените его на text-primary класс Bootstrap. Наконец, удалите класс «меньшего изображения» из вашего первого элемента img и замените его классом img-responsive .
+
## Instructions
-
+
+
## Tests
@@ -18,16 +21,16 @@ localeTitle: Ditch Custom CSS для Bootstrap
```yml
tests:
- - text: Ваш элемент h2 больше не должен иметь red-text .
- testString: 'assert(!$("h2").hasClass("red-text"), "Your h2 element should no longer have the class red-text.");'
- - text: Теперь ваш элемент h2 должен иметь text-primary класса.
- testString: 'assert($("h2").hasClass("text-primary"), "Your h2 element should now have the class text-primary.");'
- - text: ''
- testString: 'assert(!$("p").css("font-family").match(/monospace/i), "Your paragraph elements should no longer use the font Monospace.");'
- - text: ''
- testString: 'assert(!$("img").hasClass("smaller-image"), "Remove the smaller-image class from your top image.");'
- - text: ''
- testString: 'assert($(".img-responsive").length > 1, "Add the img-responsive class to your top image.");'
+ - text: Your h2 element should no longer have the class red-text.
+ testString: assert(!$("h2").hasClass("red-text"));
+ - text: Your h2 element should now have the class text-primary.
+ testString: assert($("h2").hasClass("text-primary"));
+ - text: Your paragraph elements should no longer use the font Monospace.
+ testString: assert(!$("p").css("font-family").match(/monospace/i));
+ - text: Remove the smaller-image class from your top image.
+ testString: assert(!$("img").hasClass("smaller-image"));
+ - text: Add the img-responsive class to your top image.
+ testString: assert($(".img-responsive").length > 1);
```
@@ -112,14 +115,65 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.russian.md
index fa746208bd..a2f8e18b93 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aec908855
title: Give Each Element a Unique id
challengeType: 0
-videoUrl: ''
+forumTopicId: 18191
localeTitle: Дайте каждому элементу уникальный идентификатор
---
## Description
- Мы также хотим иметь возможность использовать jQuery для ориентации каждой кнопки по ее уникальному идентификатору. Дайте каждой из ваших кнопок уникальный идентификатор, начиная с target1 и заканчивая target6 . Убедитесь, что target1 для target3 находится в #left-well , а target4 - target6 находятся в #right-well .
+
+Мы также хотим иметь возможность использовать jQuery для ориентации каждой кнопки по ее уникальному идентификатору. Дайте каждой из ваших кнопок уникальный идентификатор, начиная с target1 и заканчивая target6 . Убедитесь, что target1 для target3 находится в #left-well , а target4 - target6 находятся в #right-well .
+
## Instructions
-
+
+
## Tests
@@ -18,18 +21,18 @@ localeTitle: Дайте каждому элементу уникальный и
```yml
tests:
- - text: Один элемент button должен иметь идентификатор target1 .
- testString: 'assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0, "One button element should have the id target1.");'
- - text: Один элемент button должен иметь идентификатор target2 .
- testString: 'assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0, "One button element should have the id target2.");'
- - text: Один элемент button должен иметь идентификатор target3 .
- testString: 'assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0, "One button element should have the id target3.");'
- - text: Один элемент button должен иметь идентификатор target4 .
- testString: 'assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0, "One button element should have the id target4.");'
- - text: Один элемент button должен иметь идентификатор target5 .
- testString: 'assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0, "One button element should have the id target5.");'
- - text: Один элемент button должен иметь идентификатор target6 .
- testString: 'assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0, "One button element should have the id target6.");'
+ - text: One button element should have the id target1.
+ testString: assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0);
+ - text: One button element should have the id target2.
+ testString: assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0);
+ - text: One button element should have the id target3.
+ testString: assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0);
+ - text: One button element should have the id target4.
+ testString: assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0);
+ - text: One button element should have the id target5.
+ testString: assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0);
+ - text: One button element should have the id target6.
+ testString: assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0);
```
@@ -67,14 +70,33 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.russian.md
index 58daa39325..aa1593b026 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aec908746
title: House our page within a Bootstrap container-fluid div
challengeType: 0
-videoUrl: ''
+forumTopicId: 18198
localeTitle: Разместите нашу страницу в контейнере-контейнере Bootstrap div
---
## Description
- Теперь давайте убедимся, что все содержимое вашей страницы мобильно реагирует. Давайте вложим ваш элемент h3 элемент div с container-fluid класса.
+
+Теперь давайте убедимся, что все содержимое вашей страницы мобильно реагирует. Давайте вложим ваш элемент h3 элемент div с container-fluid класса.
+
## Instructions
-
+
+
## Tests
@@ -18,12 +21,12 @@ localeTitle: Разместите нашу страницу в контейне
```yml
tests:
- - text: Ваш элемент div должен иметь container-fluid класса.
- testString: 'assert($("div").hasClass("container-fluid"), "Your div element should have the class container-fluid.");'
- - text: 'Убедитесь, что каждый из ваших элементов div имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.");'
- - text: Гнездо вашего элемента h3 внутри элемента div .
- testString: 'assert($("div").children("h3").length >0, "Nest your h3 element inside a div element.");'
+ - text: Your div element should have the class container-fluid.
+ testString: assert($("div").hasClass("container-fluid"));
+ - text: Make sure each of your div elements has a closing tag.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
h3 element inside a div element.
+ testString: assert($("div").children("h3").length >0);
```
@@ -41,14 +44,15 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/label-bootstrap-buttons.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/label-bootstrap-buttons.russian.md
index 833a4dfdaa..39983817f0 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/label-bootstrap-buttons.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/label-bootstrap-buttons.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aec908856
title: Label Bootstrap Buttons
challengeType: 0
-videoUrl: ''
+forumTopicId: 18222
localeTitle: Кнопки бутстрапа с надписью
---
## Description
- Так же, как мы обозначили наши колодцы, мы хотим наметить наши кнопки. Дайте каждому из ваших элементов button текст, соответствующий его селектору id .
+
+Так же, как мы обозначили наши колодцы, мы хотим наметить наши кнопки. Дайте каждому из ваших элементов button текст, соответствующий его селектору id .
+
## Instructions
-
+
+
## Tests
@@ -18,18 +21,18 @@ localeTitle: Кнопки бутстрапа с надписью
```yml
tests:
- - text: 'Дайте элементу button с идентификатором target1 текст #target1 .'
- testString: 'assert(new RegExp("#target1","gi").test($("#target1").text()), "Give your button element with the id target1 the text #target1.");'
- - text: 'Дайте элементу button с идентификатором target2 текст #target2 .'
- testString: 'assert(new RegExp("#target2","gi").test($("#target2").text()), "Give your button element with the id target2 the text #target2.");'
- - text: 'Дайте элементу button с идентификатором target3 текст #target3 .'
- testString: 'assert(new RegExp("#target3","gi").test($("#target3").text()), "Give your button element with the id target3 the text #target3.");'
- - text: ''
- testString: 'assert(new RegExp("#target4","gi").test($("#target4").text()), "Give your button element with the id target4 the text #target4.");'
- - text: 'Дайте элементу button с идентификатором target5 текст #target5 .'
- testString: 'assert(new RegExp("#target5","gi").test($("#target5").text()), "Give your button element with the id target5 the text #target5.");'
- - text: 'Дайте элементу button с идентификатором target6 текст #target6 .'
- testString: 'assert(new RegExp("#target6","gi").test($("#target6").text()), "Give your button element with the id target6 the text #target6.");'
+ - text: Give your button element with the id target1 the text #target1.
+ testString: assert(new RegExp("#target1","gi").test($("#target1").text()));
+ - text: Give your button element with the id target2 the text #target2.
+ testString: assert(new RegExp("#target2","gi").test($("#target2").text()));
+ - text: Give your button element with the id target3 the text #target3.
+ testString: assert(new RegExp("#target3","gi").test($("#target3").text()));
+ - text: Give your button element with the id target4 the text #target4.
+ testString: assert(new RegExp("#target4","gi").test($("#target4").text()));
+ - text: Give your button element with the id target5 the text #target5.
+ testString: assert(new RegExp("#target5","gi").test($("#target5").text()));
+ - text: Give your button element with the id target6 the text #target6.
+ testString: assert(new RegExp("#target6","gi").test($("#target6").text()));
```
@@ -67,14 +70,33 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/label-bootstrap-wells.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/label-bootstrap-wells.russian.md
index 7a74d3df19..a86fe9187a 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/label-bootstrap-wells.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/label-bootstrap-wells.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aec908854
title: Label Bootstrap Wells
challengeType: 0
-videoUrl: ''
+forumTopicId: 18223
localeTitle: Ярлыки бутстрапов
---
## Description
- Для ясности давайте обозначим оба наших колодца своими идентификаторами. Над вашей левой кнопкой, внутри своего элемента divcol-xs-6 , добавьте элемент h4 с текстом #left-well . Над вашей правой кнопкой, внутри своего элемента divcol-xs-6 , добавьте элемент h4 с текстом #right-well .
+
+Для ясности давайте обозначим оба наших колодца своими идентификаторами. Над вашей левой кнопкой, внутри своего элемента divcol-xs-6 , добавьте элемент h4 с текстом #left-well . Над вашей правой кнопкой, внутри своего элемента divcol-xs-6 , добавьте элемент h4 с текстом #right-well .
+
## Instructions
-
+
+
## Tests
@@ -18,14 +21,14 @@ localeTitle: Ярлыки бутстрапов
```yml
tests:
- - text: Добавьте элемент h4 к каждому из ваших элементов <div class="col-xs-6"> .
- testString: 'assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1, "Add an h4 element to each of your <div class="col-xs-6"> elements.");'
- - text: 'Один элемент h4 должен иметь текст #left-well .'
- testString: 'assert(new RegExp("#left-well","gi").test($("h4").text()), "One h4 element should have the text #left-well.");'
- - text: 'Один элемент h4 должен иметь текст #right-well .'
- testString: 'assert(new RegExp("#right-well","gi").test($("h4").text()), "One h4 element should have the text #right-well.");'
- - text: 'Убедитесь, что все ваши элементы h4 имеют закрывающие метки.'
- testString: 'assert(code.match(/<\/h4>/g) && code.match(/
/g).length === code.match(/
h4 elements have closing tags.");'
+ - text: Add an h4 element to each of your <div class="col-xs-6"> elements.
+ testString: assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1);
+ - text: One h4 element should have the text #left-well.
+ testString: assert(new RegExp("#left-well","gi").test($("h4").text()));
+ - text: One h4 element should have the text #right-well.
+ testString: assert(new RegExp("#right-well","gi").test($("h4").text()));
+ - text: Make sure all your h4 elements have closing tags.
+ testString: assert(code.match(/<\/h4>/g) && code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.russian.md
index 2d2e4fb60e..94e28d622f 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.russian.md
@@ -5,15 +5,18 @@ required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
raw: true
challengeType: 0
-videoUrl: ''
+forumTopicId: 18225
localeTitle: Выстроить элементы формы с помощью Bootstrap
---
## Description
- Теперь давайте получить форму input и ваши представления button на одной и той же линии. Мы сделаем это так же, как и раньше: с помощью элемента div со row класса и других элементов div внутри него с использованием класса col-xs-* . Гнездо как текст вашей формы input и представить button в div с классом row . Гнездо input текста вашей формы в div с классом col-xs-7 . Настройте button отправки формы в div с классом col-xs-5 . Это последняя задача, которую мы будем делать для нашего приложения для фотошопа Cat. Надеемся, вам понравилось изучать шрифт Awesome, Bootstrap и отзывчивый дизайн!
+
+Теперь давайте получить форму input и ваши представления button на одной и той же линии. Мы сделаем это так же, как и раньше: с помощью элемента div со row класса и других элементов div внутри него с использованием класса col-xs-* . Гнездо как текст вашей формы input и представить button в div с классом row . Гнездо input текста вашей формы в div с классом col-xs-7 . Настройте button отправки формы в div с классом col-xs-5 . Это последняя задача, которую мы будем делать для нашего приложения для фотошопа Cat. Надеемся, вам понравилось изучать шрифт Awesome, Bootstrap и отзывчивый дизайн!
+
## Instructions
-
+
+
## Tests
@@ -21,14 +24,14 @@ localeTitle: Выстроить элементы формы с помощью Bo
```yml
tests:
- - text: Настройте кнопку отправки формы и ввод текста в div с row класса.
- testString: 'assert($("div.row:has(input[type=\"text\"])").length > 0 && $("div.row:has(button[type=\"submit\"])").length > 0, "Nest your form submission button and text input in a div with class row.");'
- - text: Гнездо ввода текста формы в div с классом col-xs-7 .
- testString: 'assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0, "Nest your form text input in a div with the class col-xs-7.");'
- - text: Настройте кнопку отправки формы в div с классом col-xs-5 .
- testString: 'assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0, "Nest your form submission button in a div with the class col-xs-5.");'
- - text: 'Убедитесь, что каждый из ваших элементов div имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.");'
+ - text: Nest your form submission button and text input in a div with class row.
+ testString: assert($("div.row:has(input[type=\"text\"])").length > 0 && $("div.row:has(button[type=\"submit\"])").length > 0);
+ - text: Nest your form text input in a div with the class col-xs-7.
+ testString: assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0);
+ - text: Nest your form submission button in a div with the class col-xs-5.
+ testString: assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0);
+ - text: Make sure each of your div elements has a closing tag.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/make-images-mobile-responsive.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/make-images-mobile-responsive.russian.md
index 767126e8db..bbc91e2562 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/make-images-mobile-responsive.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/make-images-mobile-responsive.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9acde08812
title: Make Images Mobile Responsive
challengeType: 0
-videoUrl: ''
+forumTopicId: 18232
localeTitle: Сделать образы мобильными
---
## Description
- Сначала добавьте новое изображение ниже существующего. Установите для атрибута src значение https://bit.ly/fcc-running-cats . Было бы здорово, если бы это изображение могло быть точно шириной экрана нашего телефона. К счастью, с помощью Bootstrap все, что нам нужно сделать, это добавить класс img-responsive к вашему изображению. Сделайте это, и изображение должно идеально соответствовать ширине вашей страницы.
+
+Сначала добавьте новое изображение ниже существующего. Установите для атрибута src значение https://bit.ly/fcc-running-cats . Было бы здорово, если бы это изображение могло быть точно шириной экрана нашего телефона. К счастью, с помощью Bootstrap все, что нам нужно сделать, это добавить класс img-responsive к вашему изображению. Сделайте это, и изображение должно идеально соответствовать ширине вашей страницы.
+
## Instructions
-
+
+
## Tests
@@ -18,16 +21,16 @@ localeTitle: Сделать образы мобильными
```yml
tests:
- - text: У вас должно быть в общей сложности два изображения.
- testString: 'assert($("img").length === 2, "You should have a total of two images.");'
- - text: Ваше новое изображение должно быть ниже вашего старого и иметь класс img-responsive .
- testString: 'assert($("img:eq(1)").hasClass("img-responsive"), "Your new image should be below your old one and have the class img-responsive.");'
- - text: У вашего нового изображения не должно быть класса smaller-image .
- testString: 'assert(!$("img:eq(1)").hasClass("smaller-image"), "Your new image should not have the class smaller-image.");'
- - text: 'Ваше новое изображение должно иметь srchttps://bit.ly/fcc-running-cats .'
- testString: 'assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats", "Your new image should have a src of https://bit.ly/fcc-running-cats.");'
- - text: 'Убедитесь, что ваш новый элемент img имеет скобу закрытия угла.'
- testString: 'assert(code.match(//g).length === 2 && code.match(/img element has a closing angle bracket.");'
+ - text: You should have a total of two images.
+ testString: assert($("img").length === 2);
+ - text: Your new image should be below your old one and have the class img-responsive.
+ testString: assert($("img:eq(1)").hasClass("img-responsive"));
+ - text: Your new image should not have the class smaller-image.
+ testString: assert(!$("img:eq(1)").hasClass("smaller-image"));
+ - text: Your new image should have a src of https://bit.ly/fcc-running-cats.
+ testString: assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats");
+ - text: Make sure your new img element has a closing angle bracket.
+ testString: assert(code.match(//g).length === 2 && code.match(/
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/responsively-style-checkboxes.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/responsively-style-checkboxes.russian.md
index 20afcced81..93417c8a0b 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/responsively-style-checkboxes.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/responsively-style-checkboxes.russian.md
@@ -5,15 +5,18 @@ required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
raw: true
challengeType: 0
-videoUrl: ''
+forumTopicId: 18269
localeTitle: Отзывчивые флажки стиля
---
## Description
- Вы также можете использовать классы col-xs-* Bootstrap в элементах form ! Таким образом, наши флажки будут равномерно распределены по всей странице, независимо от ширины разрешения экрана. Установите все три своих флажка в элементе <div class="row"> . Затем вставьте каждый из них в элемент <div class="col-xs-4"> .
+
+Вы также можете использовать классы col-xs-* Bootstrap в элементах form ! Таким образом, наши флажки будут равномерно распределены по всей странице, независимо от ширины разрешения экрана. Установите все три своих флажка в элементе <div class="row"> . Затем вставьте каждый из них в элемент <div class="col-xs-4"> .
+
## Instructions
-
+
+Nest all three of your checkboxes in a <div class="row"> element. Then nest each of them in a <div class="col-xs-4"> element.
## Tests
@@ -21,12 +24,12 @@ localeTitle: Отзывчивые флажки стиля
```yml
tests:
- - text: Установите все свои флажки внутри одного div с помощью row класса.
- testString: 'assert($("div.row:has(input[type=\"checkbox\"])").length > 0, "Nest all of your checkboxes inside one div with the class row.");'
- - text: Установите каждый из своих флажков в свой собственный div с классом col-xs-4 .
- testString: 'assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2, "Nest each of your checkboxes inside its own div with the class col-xs-4.");'
- - text: 'Убедитесь, что каждый из ваших элементов div имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.");'
+ - text: Nest all of your checkboxes inside one div with the class row.
+ testString: assert($("div.row:has(input[type=\"checkbox\"])").length > 0);
+ - text: Nest each of your checkboxes inside its own div with the class col-xs-4.
+ testString: assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2);
+ - text: Make sure each of your div elements has a closing tag.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.russian.md
index b1832b9156..356209cf1b 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.russian.md
@@ -5,15 +5,18 @@ required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
raw: true
challengeType: 0
-videoUrl: ''
+forumTopicId: 18270
localeTitle: Отзывчивые кнопки стиля радио
---
## Description
- Вы также можете использовать классы col-xs-* Bootstrap в элементах form ! Таким образом, наши переключатели будут равномерно распределены по всей странице, независимо от того, насколько широка разрешающая способность экрана. Установите гнезда как ваши переключатели в элементе <div class="row"> . Затем вставьте каждый из них в элемент <div class="col-xs-6"> . Примечание. В качестве напоминания, радиокнопками являются input элементы типа radio .
+
+Вы также можете использовать классы col-xs-* Bootstrap в элементах form ! Таким образом, наши переключатели будут равномерно распределены по всей странице, независимо от того, насколько широка разрешающая способность экрана. Установите гнезда как ваши переключатели в элементе <div class="row"> . Затем вставьте каждый из них в элемент <div class="col-xs-6"> . Примечание. В качестве напоминания, радиокнопками являются input элементы типа radio .
+
## Instructions
-
+
+
## Tests
@@ -21,12 +24,12 @@ localeTitle: Отзывчивые кнопки стиля радио
```yml
tests:
- - text: Гнездо всех ваших переключателей внутри одного div со row класса.
- testString: 'assert($("div.row:has(input[type=\"radio\"])").length > 0, "Nest all of your radio buttons inside one div with the class row.");'
- - text: Заглушите каждую из ваших переключателей внутри своего собственного div классом col-xs-6 .
- testString: 'assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1, "Nest each of your radio buttons inside its own div with the class col-xs-6.");'
- - text: 'Убедитесь, что каждый из ваших элементов div имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.");'
+ - text: Nest all of your radio buttons inside one div with the class row.
+ testString: assert($("div.row:has(input[type=\"radio\"])").length > 0);
+ - text: Nest each of your radio buttons inside its own div with the class col-xs-6.
+ testString: assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1);
+ - text: Make sure each of your div elements has a closing tag.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/split-your-bootstrap-row.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/split-your-bootstrap-row.russian.md
index c48fa5f2b0..2bc874c091 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/split-your-bootstrap-row.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/split-your-bootstrap-row.russian.md
@@ -2,27 +2,31 @@
id: bad87fee1348bd9aec908847
title: Split Your Bootstrap Row
challengeType: 0
-videoUrl: ''
+forumTopicId: 18306
localeTitle: Разделите строку Bootstrap
---
## Description
+
После того, как мы создали строку Bootstrap, давайте разделим её на две колонки, чтобы хранить в них наши элементы.
Создайте два `div` элемента, оба с классом `col-xs-6`, внутри вашей строки.
+
## Instructions
-undefined
+
+
+
## Tests
```yml
tests:
- - text: Поместите два элемента div class="col-xs-6" в ваш элемент div class="row" .
- testString: 'assert($("div.row > div.col-xs-6").length > 1, "Nest two div class="col-xs-6" elements within your div class="row" element.");'
- - text: 'Убедитесь, что все ваши элементы div имеют закрывающие теги.'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements have closing tags.");'
+ - text: Nest two div class="col-xs-6" elements within your div class="row" element.
+ testString: assert($("div.row > div.col-xs-6").length > 1);
+ - text: Make sure all your div elements have closing tags.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.russian.md
index c82d7a00d8..731c7207c7 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.russian.md
@@ -5,29 +5,33 @@ required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
raw: true
challengeType: 0
-videoUrl: ''
+forumTopicId: 18312
localeTitle: Ввод текста стиля как элемент управления формой
---
## Description
- Вы можете добавить значок шрифта FA fa-paper-plane Font Awesome, добавив в элемент button отправки <i class="fa fa-paper-plane"></i> . Введите поле ввода текста в form-control класса управления form-control . Отправьте кнопку отправки формы в классы btn btn-primary . Также дайте этой кнопке значок Font Awesome для fa-paper-plane . Все текстовые элементы <input> , <textarea> и <select> с классом .form-control имеют ширину 100%.
+
+Вы можете добавить значок шрифта FA fa-paper-plane Font Awesome, добавив в элемент button отправки <i class="fa fa-paper-plane"></i> . Введите поле ввода текста в form-control класса управления form-control . Отправьте кнопку отправки формы в классы btn btn-primary . Также дайте этой кнопке значок Font Awesome для fa-paper-plane . Все текстовые элементы <input> , <textarea> и <select> с классом .form-control имеют ширину 100%.
+
## Instructions
-undefined
+
+
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert($("button[type=\"submit\"]").hasClass("btn btn-primary"), "Give the submit button in your form the classes btn btn-primary.");'
- - text: ''
- testString: 'assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0, "Add a <i class="fa fa-paper-plane"></i> within your submit button element.");'
- - text: input текст в форме form-control .
- testString: 'assert($("input[type=\"text\"]").hasClass("form-control"), "Give the text input in your form the class form-control.");'
- - text: 'Убедитесь, что у каждого из ваших элементов i есть закрывающий тег.'
- testString: 'assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3, "Make sure each of your i elements has a closing tag.");'
+ - text: Give the submit button in your form the classes btn btn-primary.
+ testString: assert($("button[type=\"submit\"]").hasClass("btn btn-primary"));
+ - text: Add a <i class="fa fa-paper-plane"></i> within your submit button element.
+ testString: assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0);
+ - text: Give the text input in your form the class form-control.
+ testString: assert($("input[type=\"text\"]").hasClass("form-control"));
+ - text: Make sure each of your i elements has a closing tag.
+ testString: assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
```
@@ -116,14 +120,84 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.russian.md
index 14b1089876..e651cef389 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348cd8acef08811
title: Taste the Bootstrap Button Color Rainbow
challengeType: 0
-videoUrl: ''
+forumTopicId: 18323
localeTitle: Вкусите кнопку Bootstrap Color Rainbow
---
## Description
- Класс btn-primary - это основной цвет, который вы будете использовать в своем приложении. Он полезен для выделения действий, которые вы хотите выполнить своим пользователем. Замените класс btn-default Bootstrap на btn-primary в вашей кнопке. Обратите внимание, что этой кнопке все равно понадобятся btn и btn-block .
+
+Класс btn-primary - это основной цвет, который вы будете использовать в своем приложении. Он полезен для выделения действий, которые вы хотите выполнить своим пользователем. Замените класс btn-default Bootstrap на btn-primary в вашей кнопке. Обратите внимание, что этой кнопке все равно понадобятся btn и btn-block .
+
## Instructions
-
+
+
## Tests
@@ -18,12 +21,12 @@ localeTitle: Вкусите кнопку Bootstrap Color Rainbow
```yml
tests:
- - text: Ваша кнопка должна иметь класс btn-primary .
- testString: 'assert($("button").hasClass("btn-primary"), "Your button should have the class btn-primary.");'
- - text: У вашей кнопки все равно должны быть btn и btn-block .
- testString: 'assert($("button").hasClass("btn-block") && $("button").hasClass("btn"), "Your button should still have the btn and btn-block classes.");'
- - text: 'Убедитесь, что все элементы button имеют закрывающий тег.'
- testString: 'assert(code.match(/<\/button>/g) && code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.russian.md
index f820930667..a73c317055 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.russian.md
@@ -2,29 +2,40 @@
id: bad87fee1348bd9aedf08845
title: Use a span to Target Inline Elements
challengeType: 0
-videoUrl: ''
+forumTopicId: 18370
localeTitle: Использование диапазона для целевых встроенных элементов
---
## Description
-undefined
+
+You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?
+
+
+That illustrates the difference between an "inline" element and a "block" element.
+By using the inline span element, you can put several elements on the same line, and even style different parts of the same line differently.
+Nest the word "love" in your "Things cats love" element below within a span element. Then give that span the class text-danger to make the text red.
+Here's how you would do this with the "Top 3 things cats hate" element:
+<p>Top 3 things cats <span class="text-danger">hate:</span></p>
+
## Instructions
-undefined
+
+
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert($("p span") && $("p span").length > 0, "Your span element should be inside your p element.");'
- - text: ''
- testString: 'assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i), "Your span element should have just the text love.");'
- - text: ''
- testString: 'assert($("span").hasClass("text-danger"), "Your span element should have class text-danger.");'
- - text: ''
- testString: 'assert(code.match(/<\/span>/g) && code.match(//g).length === code.match(/span element has a closing tag.");'
+ - text: Your span element should be inside your p element.
+ testString: assert($("p span") && $("p span").length > 0);
+ - text: Your span element should have just the text love.
+ testString: assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i));
+ - text: Your span element should have class text-danger.
+ testString: assert($("span").hasClass("text-danger"));
+ - text: Make sure your span element has a closing tag.
+ testString: assert(code.match(/<\/span>/g) && code.match(//g).length === code.match(/
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
CatPhotoApp
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Things cats love:
+
+
cat nip
+
laser pointers
+
lasagna
+
+
Top 3 things cats hate:
+
+
flea treatment
+
thunder
+
other cats
+
+
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.russian.md
index 91890487b7..df3ee8fa66 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aec908857
title: Use Comments to Clarify Code
challengeType: 0
-videoUrl: ''
+forumTopicId: 18347
localeTitle: Использовать комментарии для уточнения кода
---
## Description
- Когда мы начнем использовать jQuery, мы изменим HTML-элементы без необходимости их изменения в HTML. Давайте убедиться, что все знают, что они не должны фактически изменять какой-либо из этого кода напрямую. Помните, что вы можете начинать комментарий с <!-- и заканчивать комментарий с помощью --> Добавить комментарий в верхней части вашего HTML, который говорит Only change code above this line.
+
+Когда мы начнем использовать jQuery, мы изменим HTML-элементы без необходимости их изменения в HTML. Давайте убедиться, что все знают, что они не должны фактически изменять какой-либо из этого кода напрямую. Помните, что вы можете начинать комментарий с <!-- и заканчивать комментарий с помощью --> Добавить комментарий в верхней части вашего HTML, который говорит Only change code above this line.
+
## Instructions
-
+
+
## Tests
@@ -18,14 +21,14 @@ localeTitle: Использовать комментарии для уточне
```yml
tests:
- - text: Начните комментарий с <!-- вверху вашего HTML.
- testString: 'assert(code.match(/^\s*.*this line))\s*.*this line.*\s*-->/gi), "Your comment should have the text Only change code above this line.");'
- - text: Обязательно закройте свой комментарий --> .
- testString: 'assert(code.match(/-->.*\n+.+/g), "Be sure to close your comment with -->.");'
- - text: У вас должно быть такое же количество открывателей комментариев и доводчиков.
- testString: 'assert(code.match(//g).length, "You should have the same number of comment openers and closers.");'
+ - text: Start a comment with <!-- at the top of your HTML.
+ testString: assert(code.match(/^\s*.*this line))\s*.*this line.*\s*-->/gi));
+ - text: Be sure to close your comment with -->.
+ testString: assert(code.match(/-->.*\n+.+/g));
+ - text: You should have the same number of comment openers and closers.
+ testString: assert(code.match(//g).length);
```
@@ -63,14 +66,34 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.russian.md
index 0beee93e68..622580dfc8 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.russian.md
@@ -2,29 +2,33 @@
id: bad87fee1348bd9acde08712
title: Use Responsive Design with Bootstrap Fluid Containers
challengeType: 0
-videoUrl: ''
+forumTopicId: 18362
localeTitle: Используйте адаптивный дизайн с подвижными контейнерами Bootstrap
---
## Description
+
В секциях HTML5 и CSS в freeCodeCamp мы создали Приложение для фотографий кошек. Давайте вернемся к нему. В этот раз мы стилизуем его используя, популярный адаптивный фреймворк CSS - Bootstrap.
Bootstrap определит насколько широк ваш экран и ответит измением размера ваших HTML элементов. Отсюда и название `адаптивный дизайн`.
+
## Instructions
-undefined
+
+
+
## Tests
```yml
tests:
- - text: 'Элемент div должен иметь класс container-fluid.'
- testString: 'assert($("div").hasClass("container-fluid"), "Your div element should have the class container-fluid.");'
- - text: 'Убедитесь, что ваш элемент div имеет закрывающий тег'
- testString: 'assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div element has a closing tag.");'
- - text: 'Убедитесь, что вы вставили все элементы HTML после закрывающего тега style в .container-fluid.'
- testString: 'assert($(".container-fluid").children().length >= 8, "Make sure you have nested all HTML elements after the closing style tag in .container-fluid.");'
+ - text: Your div element should have the class container-fluid.
+ testString: assert($("div").hasClass("container-fluid"));
+ - text: Make sure your div element has a closing tag.
+ testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
style tag in .container-fluid.
+ testString: assert($(".container-fluid").children().length >= 8);
```
@@ -95,14 +99,67 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.russian.md b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.russian.md
index 80b143eb10..ce54e1c693 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.russian.md
@@ -2,15 +2,18 @@
id: bad88fee1348ce8acef08815
title: Use the Bootstrap Grid to Put Elements Side By Side
challengeType: 0
-videoUrl: ''
+forumTopicId: 18371
localeTitle: Используйте сетку Bootstrap для размещения элементов рядом друг с другом
---
## Description
- Bootstrap использует гибкую 12-колонную сетку, которая позволяет легко помещать элементы в строки и задавать относительную ширину каждого элемента. Большинство классов Bootstrap могут быть применены к элементу div . Bootstrap имеет разные атрибуты ширины столбца, которые он использует, в зависимости от того, насколько широко представлен экран пользователя. Например, телефоны имеют узкие экраны, а ноутбуки имеют более широкие экраны. Возьмем, к примеру, класс col-md-* Bootstrap. Здесь md означает medium, а * - число, указывающее, сколько столбцов должно быть у элемента. В этом случае указывается ширина столбца элемента на экране среднего размера, например, ноутбука. В приложении Cat Photo, которое мы создаем, мы будем использовать col-xs-* , где xs означает col-xs-* маленький (например, экран с очень маленьким мобильным телефоном), а * - количество столбцов, определяющих, сколько столбцов элемент должен быть. Поместите кнопки Like , Info и Delete бок о бок, вставив все три из них в один элемент <div class="row"> , затем каждый из них в элементе <div class="col-xs-4"> , Класс row применяется к div , и сами кнопки могут быть вложены в него.
+
+Bootstrap использует гибкую 12-колонную сетку, которая позволяет легко помещать элементы в строки и задавать относительную ширину каждого элемента. Большинство классов Bootstrap могут быть применены к элементу div . Bootstrap имеет разные атрибуты ширины столбца, которые он использует, в зависимости от того, насколько широко представлен экран пользователя. Например, телефоны имеют узкие экраны, а ноутбуки имеют более широкие экраны. Возьмем, к примеру, класс col-md-* Bootstrap. Здесь md означает medium, а * - число, указывающее, сколько столбцов должно быть у элемента. В этом случае указывается ширина столбца элемента на экране среднего размера, например, ноутбука. В приложении Cat Photo, которое мы создаем, мы будем использовать col-xs-* , где xs означает col-xs-* маленький (например, экран с очень маленьким мобильным телефоном), а * - количество столбцов, определяющих, сколько столбцов элемент должен быть. Поместите кнопки Like , Info и Delete бок о бок, вставив все три из них в один элемент <div class="row"> , затем каждый из них в элементе <div class="col-xs-4"> , Класс row применяется к div , и сами кнопки могут быть вложены в него.
+
## Instructions
-
+
+
## Tests
@@ -18,14 +21,14 @@ localeTitle: Используйте сетку Bootstrap для размещен
```yml
tests:
- - text: Все ваши кнопки должны быть вложены в один и тот же элемент div со row класса.
- testString: 'assert($("div.row:has(button)").length > 0, "Your buttons should all be nested within the same div element with the class row.");'
- - text: Каждая из ваших кнопок Bootstrap должна быть вложена в свой собственный элемент div с классом col-xs-4 .
- testString: 'assert($("div.col-xs-4:has(button)").length > 2, "Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.");'
- - text: 'Убедитесь, что каждый из ваших button имеет закрывающий тег.'
- testString: 'assert(code.match(/<\/button>/g) && code.match(/
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
+
jQuery Playground
+
+
+
#left-well
+
+
+
+
+
+
+
+
#right-well
+
+
+
+
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.russian.md
index 6119e44ef2..0b71fd1958 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.russian.md
@@ -4,15 +4,18 @@ title: Target Elements by Class Using jQuery
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
challengeType: 6
-videoUrl: ''
+forumTopicId: 18316
localeTitle: Целевые элементы по классам Использование jQuery
---
## Description
- Вы видите, как мы отбросили все ваши элементы button ? Мы выбрали их с помощью $("button") , затем мы добавили к ним некоторые классы CSS с .addClass("animated bounce"); , Вы только что использовали .addClass() jQuery, которая позволяет добавлять классы к элементам. Во- первых, давайте нацеливать свои div элементы с классом well с помощью $(".well") селектор. Обратите внимание, что, как и в объявлениях CSS, вы вводите a . перед именем класса. Затем с помощью jQuery в .addClass() функцию , чтобы добавить классы animated и shake . Например, вы можете сделать все элементы с $(".text-primary").addClass("animated shake"); типа text-primary , добавив следующее к вашей document ready function : $(".text-primary").addClass("animated shake");
+
+Вы видите, как мы отбросили все ваши элементы button ? Мы выбрали их с помощью $("button") , затем мы добавили к ним некоторые классы CSS с .addClass("animated bounce"); , Вы только что использовали .addClass() jQuery, которая позволяет добавлять классы к элементам. Во- первых, давайте нацеливать свои div элементы с классом well с помощью $(".well") селектор. Обратите внимание, что, как и в объявлениях CSS, вы вводите a . перед именем класса. Затем с помощью jQuery в .addClass() функцию , чтобы добавить классы animated и shake . Например, вы можете сделать все элементы с $(".text-primary").addClass("animated shake"); типа text-primary , добавив следующее к вашей document ready function : $(".text-primary").addClass("animated shake");
+
## Instructions
-
+
+
## Tests
@@ -20,10 +23,10 @@ localeTitle: Целевые элементы по классам Использ
```yml
tests:
- - text: 'Используйте jQuery addClass() функцию , чтобы дать классы animated и shake , чтобы все ваши элементы с классом well .'
- testString: 'assert($(".well").hasClass("animated") && $(".well").hasClass("shake"), "Use the jQuery addClass() function to give the classes animated and shake to all your elements with the class well.");'
- - text: 'Используйте только jQuery, чтобы добавить эти классы к элементу.'
- testString: 'assert(!code.match(/class\.\*animated/g), "Only use jQuery to add these classes to the element.");'
+ - text: Use the jQuery addClass() function to give the classes animated and shake to all your elements with the class well.
+ testString: assert($(".well").hasClass("animated") && $(".well").hasClass("shake"));
+ - text: Only use jQuery to add these classes to the element.
+ testString: assert(!code.match(/class\.\*animated/g));
```
@@ -69,14 +72,42 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.russian.md
index c4cb54fc00..ac31635fb1 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.russian.md
@@ -4,15 +4,18 @@ title: Target Elements by id Using jQuery
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
challengeType: 6
-videoUrl: ''
+forumTopicId: 18317
localeTitle: Целевые элементы по id Использование jQuery
---
## Description
- Вы также можете настраивать элементы по их атрибутам id. Сначала target3 элемент button с target3 с помощью селектора $("#target3") . Обратите внимание, что, как и в объявлениях CSS, вы вводите # перед именем id. Затем используйте .addClass() jQuery для добавления классов animated и fadeOut . Вот как вы делаете элемент button с id target6 исчезающим: $("#target6").addClass("animated fadeOut") .
+
+Вы также можете настраивать элементы по их атрибутам id. Сначала target3 элемент button с target3 с помощью селектора $("#target3") . Обратите внимание, что, как и в объявлениях CSS, вы вводите # перед именем id. Затем используйте .addClass() jQuery для добавления классов animated и fadeOut . Вот как вы делаете элемент button с id target6 исчезающим: $("#target6").addClass("animated fadeOut") .
+
## Instructions
-
+
+
## Tests
@@ -20,12 +23,12 @@ localeTitle: Целевые элементы по id Использование
```yml
tests:
- - text: Выберите элемент button с idtarget3 и используйте addClass() jQuery addClass() чтобы присвоить ей класс animated .
- testString: 'assert($("#target3").hasClass("animated"), "Select the button element with the id of target3 and use the jQuery addClass() function to give it the class of animated.");'
- - text: target3 элемент с идентификатором target3 и используйте addClass() jQuery addClass() чтобы присвоить ему класс fadeOut .
- testString: 'assert(($("#target3").hasClass("fadeOut") || $("#target3").hasClass("fadeout")) && code.match(/\$\(\s*.#target3.\s*\)/g), "Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.");'
- - text: 'Используйте только jQuery, чтобы добавить эти классы к элементу.'
- testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these classes to the element.");'
+ - text: Select the button element with the id of target3 and use the jQuery addClass() function to give it the class of animated.
+ testString: assert($("#target3").hasClass("animated"));
+ - text: Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.
+ testString: assert(($("#target3").hasClass("fadeOut") || $("#target3").hasClass("fadeout")) && code.match(/\$\(\s*.#target3.\s*\)/g));
+ - text: Only use jQuery to add these classes to the element.
+ testString: assert(!code.match(/class.*animated/g));
```
@@ -73,14 +76,43 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-even-elements-using-jquery.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-even-elements-using-jquery.russian.md
index 473673b4b8..631d61dd36 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-even-elements-using-jquery.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-even-elements-using-jquery.russian.md
@@ -4,15 +4,18 @@ title: Target Even Elements Using jQuery
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
challengeType: 6
-videoUrl: ''
+forumTopicId: 18318
localeTitle: Целевые четные элементы с помощью jQuery
---
## Description
- Вы также можете настроить таргетинг на основе своих позиций с помощью :odd или :even селекторов. Обратите внимание, что jQuery индексируется с нулевой отметкой, что означает, что первый элемент в элементе выбора имеет позицию 0. Это может быть немного запутанным, как, напротив, интуитивно :odd выбирает второй элемент (позиция 1), четвертый элемент (позиция 3) , и так далее. Вот как вы бы нацеливали все нечетные элементы с помощью target$(".target:odd").addClass("animated shake"); класса и давали им классы: $(".target:odd").addClass("animated shake"); Попробуйте выбрать все четные target элементы и дать им классы animated и shake . Помните, что даже относится к позиции элементов с нулевой системой в виду.
+
+Вы также можете настроить таргетинг на основе своих позиций с помощью :odd или :even селекторов. Обратите внимание, что jQuery индексируется с нулевой отметкой, что означает, что первый элемент в элементе выбора имеет позицию 0. Это может быть немного запутанным, как, напротив, интуитивно :odd выбирает второй элемент (позиция 1), четвертый элемент (позиция 3) , и так далее. Вот как вы бы нацеливали все нечетные элементы с помощью target$(".target:odd").addClass("animated shake"); класса и давали им классы: $(".target:odd").addClass("animated shake"); Попробуйте выбрать все четные target элементы и дать им классы animated и shake . Помните, что даже относится к позиции элементов с нулевой системой в виду.
+
## Instructions
-
+
+
## Tests
@@ -20,12 +23,12 @@ localeTitle: Целевые четные элементы с помощью jQue
```yml
tests:
- - text: 'Все target элементы, которые jQuery считает равными, должны дрожать.'
- testString: 'assert($(".target:even").hasClass("animated") && $(".target:even").hasClass("shake"), "All of the target elements that jQuery considers to be even should shake.");'
- - text: 'Вы должны использовать :even селектор для изменения этих элементов.'
- testString: 'assert(code.match(/\:even/g), "You should use the :even selector to modify these elements.");'
- - text: 'Используйте только jQuery, чтобы добавить эти классы к элементу.'
- testString: 'assert(code.match(/\$\(".target:even"\)/g) || code.match(/\$\(".target:even"\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g), "Only use jQuery to add these classes to the element.");'
+ - text: All of the target elements that jQuery considers to be even should shake.
+ testString: assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'));
+ - text: You should use the :even selector to modify these elements.
+ testString: assert(code.match(/\:even/g));
+ - text: Only use jQuery to add these classes to the element.
+ testString: assert(code.match(/\$\(".target:even"\)/g) || code.match(/\$\('.target:even'\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g) || code.match(/\$\('.target'\).filter\(':even'\)/g));
```
@@ -80,14 +83,50 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.russian.md
index 5b5fc8e4d2..73e77257b7 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.russian.md
@@ -4,15 +4,18 @@ title: Target HTML Elements with Selectors Using jQuery
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
challengeType: 6
-videoUrl: ''
+forumTopicId: 18319
localeTitle: Целевые элементы HTML с селекторами Использование jQuery
---
## Description
- Теперь у нас есть document ready function . Теперь давайте напишем наш первый оператор jQuery. Все функции jQuery начинаются с $ , обычно называемого dollar sign operator , или как bling . jQuery часто выбирает элемент HTML с selector , затем делает что-то с этим элементом. Например, давайте сделаем все ваши элементы button отскоком. Просто добавьте этот код в свою готовую документ: $("button").addClass("animated bounce"); Обратите внимание, что мы уже включили библиотеку jQuery и библиотеку Animate.css в фоновом режиме, чтобы вы могли использовать их в редакторе. Таким образом, вы используете jQuery для применения класса bounce Animate.css к вашим элементам button .
+
+Теперь у нас есть document ready function . Теперь давайте напишем наш первый оператор jQuery. Все функции jQuery начинаются с $ , обычно называемого dollar sign operator , или как bling . jQuery часто выбирает элемент HTML с selector , затем делает что-то с этим элементом. Например, давайте сделаем все ваши элементы button отскоком. Просто добавьте этот код в свою готовую документ: $("button").addClass("animated bounce"); Обратите внимание, что мы уже включили библиотеку jQuery и библиотеку Animate.css в фоновом режиме, чтобы вы могли использовать их в редакторе. Таким образом, вы используете jQuery для применения класса bounce Animate.css к вашим элементам button .
+
## Instructions
-
+
+
## Tests
@@ -20,12 +23,12 @@ localeTitle: Целевые элементы HTML с селекторами Ис
```yml
tests:
- - text: Используйте addClass() jQuery addClass() чтобы дать animated классы и bounce к вашим элементам button .
- testString: 'assert($("button").hasClass("animated") && $("button").hasClass("bounce"), "Use the jQuery addClass() function to give the classes animated and bounce to your button elements.");'
- - text: 'Используйте только jQuery, чтобы добавить эти цвета к элементу.'
- testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these colors to the element.");'
- - text: Ваш код jQuery должен находиться в пределах $(document).ready(); функция.
- testString: 'assert(code.match(/\$\(document\)\.ready\(function.*(\s|\n)*.*button.*.addClass.*\);/g), "Your jQuery code should be within the $(document).ready(); function.");'
+ - text: Use the jQuery addClass() function to give the classes animated and bounce to your button elements.
+ testString: assert($("button").hasClass("animated") && $("button").hasClass("bounce"));
+ - text: Only use jQuery to add these classes to the element.
+ testString: assert(!code.match(/class.*animated/g));
+ - text: Your jQuery code should be within the $(document).ready(); function.
+ testString: assert(code.match(/\$\(document\)\.ready\(function.*(\s|\n)*.*button.*.addClass.*\);/g));
```
@@ -71,14 +74,41 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.russian.md
index 9832980c7f..6e75165f83 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.russian.md
@@ -2,33 +2,37 @@
id: bad87fee1348bd9aed208826
title: Target the Children of an Element Using jQuery
challengeType: 6
-videoUrl: ''
+forumTopicId: 18320
localeTitle: Выбрать дочерние элементы с помощью jQuery
---
## Description
+
Когда HTML элементы размещены на один уровень ниже другого, они называются `дочерними` этого элемента. Например, элементы кнопки в этом задании с текстом "#target1", "#target2", и "#target3" являются `дочерними` элемента `
`.
-
+
В jQuery есть функция `children()`, которая позволяет вам получить доступ к дочерним элементам любого выбранного вами элемента.
Ниже пример того, как бы вы использовали функцию `children()`, чтобы дать `синий` цвет дочерним элементам вашего `left-well`.
`$("#left-well").children().css("color", "blue")`
+
## Instructions
- Дайте всем дочерним элементам вашего right-well элемента колорит оранжевый цвет.
+
+Дайте всем дочерним элементам вашего right-well элемента колорит оранжевый цвет.
+
## Tests
```yml
tests:
- - text: 'Все дочерние элементы #right-well должны иметь оранжевый текст'
- testString: 'assert($("#right-well").children().css("color") === "rgb(255, 165, 0)", "All children of #right-well should have orange text.");'
- - text: Вы должны использовать функцию children() для изменения этих элементов.
- testString: 'assert(code.match(/\.children\(\)\.css/g), "You should use the children() function to modify these elements.");'
- - text: 'Используйте только jQuery, чтобы добавить эти классы к элементу.'
- testString: 'assert(code.match(/
/g), "Only use jQuery to add these classes to the element.");'
+ - text: All children of #right-well should have orange text.
+ testString: assert($("#right-well").children().css("color") === 'rgb(255, 165, 0)');
+ - text: You should use the children() function to modify these elements.
+ testString: assert(code.match(/\.children\(\)\.css/g));
+ - text: Only use jQuery to add these classes to the element.
+ testString: assert(code.match(/
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.russian.md
index 53726a7754..09a69e373d 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.russian.md
@@ -2,23 +2,26 @@
id: bad87fee1348bd9aed308826
title: Target the Parent of an Element Using jQuery
challengeType: 6
-videoUrl: ''
+forumTopicId: 18321
localeTitle: Задайте родителя элемента с помощью jQuery
---
## Description
+
Каждый HTML элемент имеет `родительский` элемент, от которого он `наследует` свойства.
Например, ваш элемент `jQuery Playground h3` имеет родительский элемент `
`, который в свою очередь имеет в качестве родителя `body`.
-
+
В jQuery есть функция называющаяся `parent()`, которая позволяет вам получить доступ к родителю любого элемента, который вы выбрали.
Вот пример того, как бы вы использовали функцию `parent()`, если бы вы захотели дать синий фон родительскому элементу элемента `left-well`.
-
+
`$("#left-well").parent().css("background-color", "blue")`
+
## Instructions
-
+
+
## Tests
@@ -26,14 +29,14 @@ localeTitle: Задайте родителя элемента с помощью
```yml
tests:
- - text: Элемент left-well должен иметь красный фон.
- testString: 'assert($("#left-well").css("background-color") === "red" || $("#left-well").css("background-color") === "rgb(255, 0, 0)" || $("#left-well").css("background-color").toLowerCase() === "#ff0000" || $("#left-well").css("background-color").toLowerCase() === "#f00", "Your left-well element should have a red background.");'
- - text: ''
- testString: 'assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g), "You should use the .parent() function to modify this element.");'
- - text: 'Метод .parent() должен быть вызван в элементе #target1 .'
- testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?#target1\s*?(?:"|")\s*?\)\s*?\.parent/gi), "The .parent() method should be called on the #target1 element.");'
- - text: 'Используйте только jQuery, чтобы добавить эти классы к элементу.'
- testString: 'assert(code.match(/
/g), "Only use jQuery to add these classes to the element.");'
+ - text: Your left-well element should have a red background.
+ testString: assert($("#left-well").css("background-color") === 'red' || $("#left-well").css("background-color") === 'rgb(255, 0, 0)' || $("#left-well").css("background-color").toLowerCase() === '#ff0000' || $("#left-well").css("background-color").toLowerCase() === '#f00');
+ - text: You should use the .parent() function to modify this element.
+ testString: assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));
+ - text: The .parent() method should be called on the #target1 element.
+ testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")\s*?\)\s*?\.parent/gi));
+ - text: Only use jQuery to add these classes to the element.
+ testString: assert(code.match(/
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.russian.md
index 1ae643d47a..6f094b07b0 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.russian.md
@@ -4,15 +4,18 @@ title: Target the Same Element with Multiple jQuery Selectors
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
challengeType: 6
-videoUrl: ''
+forumTopicId: 18322
localeTitle: Цель одного и того же элемента с несколькими селекторами jQuery
---
## Description
- Теперь вы знаете три способа таргетинга элементов: по типу: $("button") , по классу: $(".btn") и по id $("#target1") . Хотя можно добавить несколько классов в один .addClass() , давайте добавим их в один и тот же элемент тремя разными способами . Используя .addClass() , добавьте только один класс за один раз к одному и тому же элементу, тремя разными способами: добавьте animated класс ко всем элементам с button типа. Добавьте класс shake ко всем кнопкам с классом .btn . Добавьте btn-primary к кнопке с идентификатором #target1 . Заметка Вы должны ориентироваться только на один элемент и одновременно добавлять только один класс. В целом, ваши три отдельных селектора в конечном итоге btn-primary три класса shake , animated и btn-primary в #target1 .
+
+Теперь вы знаете три способа таргетинга элементов: по типу: $("button") , по классу: $(".btn") и по id $("#target1") . Хотя можно добавить несколько классов в один .addClass() , давайте добавим их в один и тот же элемент тремя разными способами . Используя .addClass() , добавьте только один класс за один раз к одному и тому же элементу, тремя разными способами: добавьте animated класс ко всем элементам с button типа. Добавьте класс shake ко всем кнопкам с классом .btn . Добавьте btn-primary к кнопке с идентификатором #target1 . Заметка Вы должны ориентироваться только на один элемент и одновременно добавлять только один класс. В целом, ваши три отдельных селектора в конечном итоге btn-primary три класса shake , animated и btn-primary в #target1 .
+
## Instructions
-
+
+
## Tests
@@ -20,18 +23,18 @@ localeTitle: Цель одного и того же элемента с неск
```yml
tests:
- - text: Используйте селектор $("button") .
- testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?button\s*?(?:"|")/gi), "Use the $("button") selector.");'
- - text: ''
- testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?\.btn\s*?(?:"|")/gi), "Use the $(".btn") selector.");'
- - text: ''
- testString: 'assert(code.match(/\$\s*?\(\s*?(?:"|")\s*?#target1\s*?(?:"|")/gi), "Use the $("#target1") selector.");'
- - text: ''
- testString: 'assert(code.match(/addClass/g) && code.match(/addClass\s*?\(\s*?("|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2, "Only add one class with each of your three selectors.");'
- - text: ''
- testString: 'assert($("#target1").hasClass("animated") && $("#target1").hasClass("shake") && $("#target1").hasClass("btn-primary"), "Your #target1 element should have the classes animated‚ shake and btn-primary.");'
- - text: 'Используйте только jQuery, чтобы добавить эти классы к элементу.'
- testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these classes to the element.");'
+ - text: Use the $("button") selector.
+ testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?button\s*?(?:'|")/gi));
+ - text: Use the $(".btn") selector.
+ testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?\.btn\s*?(?:'|")/gi));
+ - text: Use the $("#target1") selector.
+ testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
+ - text: Only add one class with each of your three selectors.
+ testString: assert(code.match(/addClass/g) && code.match(/addClass\s*?\(\s*?('|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2);
+ - text: Your #target1 element should have the classes animated‚ shake and btn-primary.
+ testString: assert($('#target1').hasClass('animated') && $('#target1').hasClass('shake') && $('#target1').hasClass('btn-primary'));
+ - text: Only use jQuery to add these classes to the element.
+ testString: assert(!code.match(/class.*animated/g));
```
@@ -77,14 +80,43 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.russian.md
index 671efa48d6..8597fdd335 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.russian.md
@@ -2,15 +2,18 @@
id: bad87fee1348bd9aed608826
title: Use appendTo to Move Elements with jQuery
challengeType: 6
-videoUrl: ''
+forumTopicId: 18340
localeTitle: Используйте appendTo для перемещения элементов с помощью jQuery
---
## Description
- Теперь давайте попробуем переместить элементы из одного div в другой. Функция jQuery имеет функцию appendTo() которая позволяет вам выбирать элементы HTML и добавлять их к другому элементу. Например, если мы хотим перенести target4 с нашей правой скважины на нашу левую скважину, мы будем использовать: $("#target4").appendTo("#left-well"); Переместите элемент target2 с left-well на right-well .
+
+Теперь давайте попробуем переместить элементы из одного div в другой. Функция jQuery имеет функцию appendTo() которая позволяет вам выбирать элементы HTML и добавлять их к другому элементу. Например, если мы хотим перенести target4 с нашей правой скважины на нашу левую скважину, мы будем использовать: $("#target4").appendTo("#left-well"); Переместите элемент target2 с left-well на right-well .
+
## Instructions
-
+
+
## Tests
@@ -18,12 +21,12 @@ localeTitle: Используйте appendTo для перемещения эл
```yml
tests:
- - text: Ваш target2 не должен находиться внутри вашей left-welltarget2 .
- testString: 'assert($("#left-well").children("#target2").length === 0, "Your target2 element should not be inside your left-well.");'
- - text: Ваш target2 должен находиться внутри вашей right-welltarget2 .
- testString: 'assert($("#right-well").children("#target2").length > 0, "Your target2 element should be inside your right-well.");'
- - text: Используйте только jQuery для перемещения этих элементов.
- testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to move these elements.");'
+ - text: Your target2 element should not be inside your left-well.
+ testString: assert($("#left-well").children("#target2").length === 0);
+ - text: Your target2 element should be inside your right-well.
+ testString: assert($("#right-well").children("#target2").length > 0);
+ - text: Only use jQuery to move these elements.
+ testString: assert(!code.match(/class.*animated/g));
```
@@ -72,14 +75,44 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.russian.md b/curriculum/challenges/russian/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.russian.md
index 86dfc0c649..b5d613e0dc 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.russian.md
@@ -4,15 +4,18 @@ title: Use jQuery to Modify the Entire Page
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
challengeType: 6
-videoUrl: ''
+forumTopicId: 18361
localeTitle: Использование jQuery для изменения всей страницы
---
## Description
- Мы закончили играть с нашей игровой площадкой jQuery. Давайте разорвём его! jQuery может также нацеливаться на элемент body . Вот как мы можем заставить все тело исчезать: $("body").addClass("animated fadeOut"); Но давайте сделаем что-то более драматичное. Добавьте animated классы и hinge к элементу вашего body .
+
+Мы закончили играть с нашей игровой площадкой jQuery. Давайте разорвём его! jQuery может также нацеливаться на элемент body . Вот как мы можем заставить все тело исчезать: $("body").addClass("animated fadeOut"); Но давайте сделаем что-то более драматичное. Добавьте animated классы и hinge к элементу вашего body .
+
## Instructions
-
+
+
## Tests
@@ -20,8 +23,8 @@ localeTitle: Использование jQuery для изменения все
```yml
tests:
- - text: Добавьте animated классы и hinge к элементу вашего body .
- testString: 'assert($("body").hasClass("animated") && $("body").hasClass("hinge"), "Add the classes animated and hinge to your body element.");'
+ - text: Add the classes animated and hinge to your body element.
+ testString: assert($('body').hasClass('animated') && $('body').hasClass('hinge'));
```
@@ -77,14 +80,51 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/connect-redux-to-react.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/connect-redux-to-react.russian.md
index 327f2ea1a1..7223f4117f 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/connect-redux-to-react.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/connect-redux-to-react.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036147
title: Connect Redux to React
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301426
localeTitle: Подключите Redux к действию
---
## Description
- Теперь, когда вы написали функции mapStateToProps() и mapDispatchToProps() , вы можете использовать их для отображения state и dispatch в props одного из ваших компонентов React. Метод connect из React Redux может справиться с этой задачей. Этот метод принимает два необязательных аргумента: mapStateToProps() и mapDispatchToProps() . Они являются необязательными, потому что у вас может быть компонент, которому нужен только доступ к state но ему не нужно отправлять какие-либо действия или наоборот. Чтобы использовать этот метод, передайте функции в качестве аргументов и немедленно вызовите результат с вашим компонентом. Этот синтаксис немного необычен и выглядит так: connect(mapStateToProps, mapDispatchToProps)(MyComponent)Примечание. Если вы хотите опустить один из аргументов метода connect , вы передаете null на свое место.
+
+Теперь, когда вы написали функции mapStateToProps() и mapDispatchToProps() , вы можете использовать их для отображения state и dispatch в props одного из ваших компонентов React. Метод connect из React Redux может справиться с этой задачей. Этот метод принимает два необязательных аргумента: mapStateToProps() и mapDispatchToProps() . Они являются необязательными, потому что у вас может быть компонент, которому нужен только доступ к state но ему не нужно отправлять какие-либо действия или наоборот. Чтобы использовать этот метод, передайте функции в качестве аргументов и немедленно вызовите результат с вашим компонентом. Этот синтаксис немного необычен и выглядит так: connect(mapStateToProps, mapDispatchToProps)(MyComponent)Примечание. Если вы хотите опустить один из аргументов метода connect , вы передаете null на свое место.
+
## Instructions
- Редактор кода имеет функции mapStateToProps() и mapDispatchToProps() и новый компонент React, называемый Presentational . Подключите этот компонент к Redux с помощью метода connect из глобального объекта ReactRedux и немедленно вызовите его на компоненте Presentational . Назначьте результат новой const называемой ConnectedComponent которая представляет подключенный компонент. Вот и все, теперь вы подключены к Redux! Попробуйте изменить либо из connect аргументов «s к null и наблюдать за результатами испытаний.
+
+Редактор кода имеет функции mapStateToProps() и mapDispatchToProps() и новый компонент React, называемый Presentational . Подключите этот компонент к Redux с помощью метода connect из глобального объекта ReactRedux и немедленно вызовите его на компоненте Presentational . Назначьте результат новой const называемой ConnectedComponent которая представляет подключенный компонент. Вот и все, теперь вы подключены к Redux! Попробуйте изменить либо из connect аргументов «s к null и наблюдать за результатами испытаний.
+
## Tests
```yml
tests:
- - text: Presentational компонент должен отображать.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational component should render.");'
- - text: Presentational компонент должен получать messages оповещения через connect .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The Presentational component should receive a prop messages via connect.");'
- - text: Presentational компонент должен получить опору submitNewMessage через connect .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational component should receive a prop submitNewMessage via connect.");'
+ - text: The Presentational component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })());
+ - text: The Presentational component should receive a prop messages via connect.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return props.messages === '__INITIAL__STATE__'; })());
+ - text: The Presentational component should receive a prop submitNewMessage via connect.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return typeof props.submitNewMessage === 'function'; })());
```
@@ -72,12 +76,24 @@ const connect = ReactRedux.connect;
+ }
+};
+
+const connect = ReactRedux.connect;
+// change code below this line
+
+const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.russian.md
index a1ce79b632..5f8be7a115 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d4036148
title: Connect Redux to the Messages App
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301427
localeTitle: Подключить Redux к приложению «Сообщения»
---
## Description
- Теперь, когда вы понимаете, как использовать connect для подключения React к Redux, вы можете применить то, что вы узнали, к своему компоненту React, который обрабатывает сообщения. В последнем уроке компонент, который вы подключили к Redux, был назван Presentational , и это не было произвольным. Этот термин обычно относится к компонентам React, которые напрямую не связаны с Redux. Они просто отвечают за представление пользовательского интерфейса и делают это в зависимости от реквизита, который они получают. Напротив, компоненты контейнера подключены к Redux. Обычно они отвечают за отправку действий в хранилище и часто передают состояние хранилища дочерним компонентам в качестве реквизита.
+
+Теперь, когда вы понимаете, как использовать connect для подключения React к Redux, вы можете применить то, что вы узнали, к своему компоненту React, который обрабатывает сообщения. В последнем уроке компонент, который вы подключили к Redux, был назван Presentational , и это не было произвольным. Этот термин обычно относится к компонентам React, которые напрямую не связаны с Redux. Они просто отвечают за представление пользовательского интерфейса и делают это в зависимости от реквизита, который они получают. Напротив, компоненты контейнера подключены к Redux. Обычно они отвечают за отправку действий в хранилище и часто передают состояние хранилища дочерним компонентам в качестве реквизита.
+
## Instructions
- Редактор кода имеет весь код, который вы написали в этом разделе. Единственное изменение заключается в том, что компонент React переименовывается в Presentational . Создайте новый компонент, состоящий из константы, называемой Container которая использует connect для подключения Presentational компонента к Redux. Затем в AppWrapper отобразите компонент React Redux Provider . Пропустите Providerstore Redux в качестве опоры и выведите Container в качестве ребенка. Как только все будет установлено, вы снова увидите сообщение, отображаемое на странице.
+
+Редактор кода имеет весь код, который вы написали в этом разделе. Единственное изменение заключается в том, что компонент React переименовывается в Presentational . Создайте новый компонент, состоящий из константы, называемой Container которая использует connect для подключения Presentational компонента к Redux. Затем в AppWrapper отобразите компонент React Redux Provider . Пропустите Providerstore Redux в качестве опоры и выведите Container в качестве ребенка. Как только все будет установлено, вы снова увидите сообщение, отображаемое на странице.
+
## Tests
```yml
tests:
- - text: AppWrapper должен отобразить страницу.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The AppWrapper should render to the page.");'
- - text: 'Presentational компонент должен отображать элементы h2 , input , button и ul .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational component should render an h2, input, button, and ul elements.");'
- - text: 'Presentational компонент должен отображать элементы h2 , input , button и ul .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); return ( PresentationalComponent.find("div").length === 1 && PresentationalComponent.find("h2").length === 1 && PresentationalComponent.find("button").length === 1 && PresentationalComponent.find("ul").length === 1 ); })(), "The Presentational component should render an h2, input, button, and ul elements.");'
- - text: Presentational компонент должен получать messages от магазина Redux в качестве опоры.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), "The Presentational component should receive messages from the Redux store as a prop.");'
- - text: Presentational компонент должен получить создателя действия submitMessage в качестве опоры.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational component should receive the submitMessage action creator as a prop.");'
+ - text: The AppWrapper should render to the page.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })());
+ - text: The Presentational component should render an h2, input, button, and ul elements.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })());
+ - text: The Presentational component should render an h2, input, button, and ul elements.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); return ( PresentationalComponent.find('div').length === 1 && PresentationalComponent.find('h2').length === 1 && PresentationalComponent.find('button').length === 1 && PresentationalComponent.find('ul').length === 1 ); })());
+ - text: The Presentational component should receive messages from the Redux store as a prop.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })());
+ - text: The Presentational component should receive the submitMessage action creator as a prop.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === 'function'; })());
```
@@ -68,7 +72,7 @@ class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
- input: ",
+ input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
@@ -82,7 +86,7 @@ class Presentational extends React.Component {
submitMessage() {
const currentMessage = this.state.input;
this.setState({
- input: ",
+ input: '',
messages: this.state.messages.concat(currentMessage)
});
}
@@ -140,12 +144,12 @@ class AppWrapper extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
+
+// React-Redux:
+const mapStateToProps = (state) => {
+ return { messages: state }
+};
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ submitNewMessage: (newMessage) => {
+ dispatch(addMessage(newMessage))
+ }
+ }
+};
+
+const Provider = ReactRedux.Provider;
+const connect = ReactRedux.connect;
+
+// define the Container component here:
+const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
+
+class AppWrapper extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ // complete the return statement:
+ return (
+
+
+
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/extract-local-state-into-redux.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/extract-local-state-into-redux.russian.md
index e9c5f2247a..dc4a8abb3c 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/extract-local-state-into-redux.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/extract-local-state-into-redux.russian.md
@@ -3,39 +3,43 @@ id: 5a24c314108439a4d4036149
title: Extract Local State into Redux
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301428
localeTitle: Извлечь локальное состояние в Redux
---
## Description
- Вы почти закончили! Напомним, что вы написали весь код Redux, чтобы Redux мог контролировать управление вашим приложением React messages. Теперь, когда Redux подключен, вам нужно извлечь управление состоянием из компонента Presentational и в Redux. В настоящее время вы подключены к Redux, но вы управляете состоянием локально в составе Presentational компонента.
+
+Вы почти закончили! Напомним, что вы написали весь код Redux, чтобы Redux мог контролировать управление вашим приложением React messages. Теперь, когда Redux подключен, вам нужно извлечь управление состоянием из компонента Presentational и в Redux. В настоящее время вы подключены к Redux, но вы управляете состоянием локально в составе Presentational компонента.
+
## Instructions
- В компоненте Presentational сначала удалите свойство messages в локальном state . Эти сообщения будут управляться Redux. Затем измените метод submitMessage() так, чтобы он отправил submitNewMessage() из this.props и передал текущее сообщение из локального state в качестве аргумента. Поскольку вы удалили messages из локального состояния, удалите свойство messages из вызова this.setState() здесь. Наконец, измените метод render() чтобы он отображал сообщения, полученные из props а не state . После внесения этих изменений приложение будет продолжать функционировать одинаково, за исключением того, что Redux управляет состоянием. В этом примере также показано, как компонент может иметь локальное state : ваш компонент по-прежнему отслеживает ввод пользователя локально в своем собственном state . Вы можете видеть, как Redux предоставляет полезную структуру управления государственными ресурсами поверх React. Вы достигли того же результата, используя сначала локальное состояние React, и это обычно возможно с помощью простых приложений. Однако, поскольку ваши приложения становятся все больше и сложнее, так же как и ваше управление состоянием, и это проблема, которую решает Redux.
+
+В компоненте Presentational сначала удалите свойство messages в локальном state . Эти сообщения будут управляться Redux. Затем измените метод submitMessage() так, чтобы он отправил submitNewMessage() из this.props и передал текущее сообщение из локального state в качестве аргумента. Поскольку вы удалили messages из локального состояния, удалите свойство messages из вызова this.setState() здесь. Наконец, измените метод render() чтобы он отображал сообщения, полученные из props а не state . После внесения этих изменений приложение будет продолжать функционировать одинаково, за исключением того, что Redux управляет состоянием. В этом примере также показано, как компонент может иметь локальное state : ваш компонент по-прежнему отслеживает ввод пользователя локально в своем собственном state . Вы можете видеть, как Redux предоставляет полезную структуру управления государственными ресурсами поверх React. Вы достигли того же результата, используя сначала локальное состояние React, и это обычно возможно с помощью простых приложений. Однако, поскольку ваши приложения становятся все больше и сложнее, так же как и ваше управление состоянием, и это проблема, которую решает Redux.
+
## Tests
```yml
tests:
- - text: AppWrapper должен отобразить страницу.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The AppWrapper should render to the page.");'
- - text: 'Presentational компонент должен отображать элементы h2 , input , button и ul .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational component should render an h2, input, button, and ul elements.");'
- - text: 'Presentational компонент должен отображать элементы h2 , input , button и ul .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); return ( PresentationalComponent.find("div").length === 1 && PresentationalComponent.find("h2").length === 1 && PresentationalComponent.find("button").length === 1 && PresentationalComponent.find("ul").length === 1 ); })(), "The Presentational component should render an h2, input, button, and ul elements.");'
- - text: Presentational компонент должен получать messages от магазина Redux в качестве опоры.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), "The Presentational component should receive messages from the Redux store as a prop.");'
- - text: Presentational компонент должен получить создателя действия submitMessage в качестве опоры.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational component should receive the submitMessage action creator as a prop.");'
- - text: 'Состояние компонента Presentational должно содержать одно свойство, input , которое инициализируется пустой строкой.'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalState = mockedComponent.find("Presentational").instance().state; return typeof PresentationalState.input === "string" && Object.keys(PresentationalState).length === 1; })(), "The state of the Presentational component should contain one property, input, which is initialized to an empty string.");'
- - text: Ввод в элемент input должен обновить состояние компонента Presentational .
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const testValue = "__MOCK__INPUT__"; const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); let initialInput = mockedComponent.find("Presentational").find("input"); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); const updatedInput = updated.find("Presentational").find("input"); assert(initialInput.props().value === "" && updatedInput.props().value === "__MOCK__INPUT__", "Typing in the input element should update the state of the Presentational component."); }; '
- - text: При submitMessage на Presentational компоненте необходимо обновить хранилище Redux и очистить ввод в локальном состоянии.
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find("Presentational").props(); const testValue = "__TEST__EVENT__INPUT__"; const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find("input").props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find("Presentational").props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find("input").props().value === "", "Dispatching the submitMessage on the Presentational component should update Redux store and clear the input in local state."); }; '
- - text: Presentational компонент должен отображать messages из магазина Redux.
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find("Presentational").props(); const testValue = "__TEST__EVENT__INPUT__"; const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find("input").props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find("Presentational").props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find("input").props().value === "" && afterClick.find("ul").childAt(0).text() === testValue, "The Presentational component should render the messages from the Redux store."); }; '
+ - text: The AppWrapper should render to the page.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })());
+ - text: The Presentational component should render an h2, input, button, and ul elements.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })());
+ - text: The Presentational component should render an h2, input, button, and ul elements.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); return ( PresentationalComponent.find('div').length === 1 && PresentationalComponent.find('h2').length === 1 && PresentationalComponent.find('button').length === 1 && PresentationalComponent.find('ul').length === 1 ); })());
+ - text: The Presentational component should receive messages from the Redux store as a prop.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })());
+ - text: The Presentational component should receive the submitMessage action creator as a prop.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === 'function'; })());
+ - text: The state of the Presentational component should contain one property, input, which is initialized to an empty string.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalState = mockedComponent.find('Presentational').instance().state; return typeof PresentationalState.input === 'string' && Object.keys(PresentationalState).length === 1; })());
+ - text: Typing in the input element should update the state of the Presentational component.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const testValue = ''__MOCK__INPUT__''; const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); let initialInput = mockedComponent.find(''Presentational'').find(''input''); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); const updatedInput = updated.find(''Presentational'').find(''input''); assert(initialInput.props().value === '''' && updatedInput.props().value === ''__MOCK__INPUT__''); }; '
+ - text: Dispatching the submitMessage on the Presentational component should update Redux store and clear the input in local state.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find(''Presentational'').props(); const testValue = ''__TEST__EVENT__INPUT__''; const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find(''input'').props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find(''Presentational'').props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find(''input'').props().value === ''''); }; '
+ - text: The Presentational component should render the messages from the Redux store.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find(''Presentational'').props(); const testValue = ''__TEST__EVENT__INPUT__''; const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find(''input'').props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find(''Presentational'').props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find(''input'').props().value === '''' && afterClick.find(''ul'').childAt(0).text() === testValue); }; '
```
@@ -80,7 +84,7 @@ class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
- input: ",
+ input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
@@ -93,7 +97,7 @@ class Presentational extends React.Component {
}
submitMessage() {
this.setState({
- input: ",
+ input: '',
messages: this.state.messages.concat(this.state.input)
});
}
@@ -147,12 +151,12 @@ class AppWrapper extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
+// Change code above this line
+
+const mapStateToProps = (state) => {
+ return {messages: state}
+};
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ submitNewMessage: (message) => {
+ dispatch(addMessage(message))
+ }
+ }
+};
+
+const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
+
+class AppWrapper extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.russian.md
index c713f02120..ab1f781429 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.russian.md
@@ -3,33 +3,37 @@ id: 5a24c314108439a4d4036143
title: Extract State Logic to Redux
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301429
localeTitle: Извлечь логику состояния в Redux
---
## Description
- Теперь, когда вы закончили компонент React, вам нужно переместить логику, которую она выполняет локально в своем state в Redux. Это первый шаг для подключения простого приложения React к Redux. Единственная функциональность вашего приложения - это добавить новые сообщения от пользователя в неупорядоченный список. Пример прост, чтобы продемонстрировать, как React и Redux работают вместе.
+
+Теперь, когда вы закончили компонент React, вам нужно переместить логику, которую она выполняет локально в своем state в Redux. Это первый шаг для подключения простого приложения React к Redux. Единственная функциональность вашего приложения - это добавить новые сообщения от пользователя в неупорядоченный список. Пример прост, чтобы продемонстрировать, как React и Redux работают вместе.
+
## Instructions
- Сначала определите тип действия «ADD» и установите его в ADD const. Затем определите создателя действия addMessage() который создает действие для добавления сообщения. Вам нужно передать message этому создателю действия и включить сообщение в возвращаемое action . Затем создайте редуктор, называемый messageReducer() который обрабатывает состояние для сообщений. Начальное состояние должно равняться пустующему массиву. Этот редуктор должен добавить сообщение в массив сообщений, находящихся в состоянии, или вернуть текущее состояние. Наконец, создайте свой магазин Redux и передайте ему редуктор.
+
+Сначала определите тип действия «ADD» и установите его в ADD const. Затем определите создателя действия addMessage() который создает действие для добавления сообщения. Вам нужно передать message этому создателю действия и включить сообщение в возвращаемое action . Затем создайте редуктор, называемый messageReducer() который обрабатывает состояние для сообщений. Начальное состояние должно равняться пустующему массиву. Этот редуктор должен добавить сообщение в массив сообщений, находящихся в состоянии, или вернуть текущее состояние. Наконец, создайте свой магазин Redux и передайте ему редуктор.
+
## Tests
```yml
tests:
- - text: 'ADD должен существовать и содержать значение, равное строке ADD'
- testString: 'assert(ADD === "ADD", "The const ADD should exist and hold a value equal to the string ADD");'
- - text: 'Создатель действия addMessage должен возвращать объект с type равным ADD и сообщение, равное сообщению, которое передается.'
- testString: 'assert((function() { const addAction = addMessage("__TEST__MESSAGE__"); return addAction.type === ADD && addAction.message === "__TEST__MESSAGE__"; })(), "The action creator addMessage should return an object with type equal to ADD and message equal to the message that is passed in.");'
- - text: messageReducer должен быть функцией.
- testString: 'assert(typeof messageReducer === "function", "messageReducer should be a function.");'
- - text: 'Магазин должен существовать и иметь исходное состояние, установленное в пустой массив.'
- testString: 'assert((function() { const initialState = store.getState(); return typeof store === "object" && initialState.length === 0; })(), "The store should exist and have an initial state set to an empty array.");'
- - text: 'Отправка addMessage в хранилище должна неизменно добавлять новое сообщение в массив сообщений, хранящихся в состоянии.'
- testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addMessage("__A__TEST__MESSAGE")); const addState = store.getState(); return (isFrozen && addState[0] === "__A__TEST__MESSAGE"); })(), "Dispatching addMessage against the store should immutably add a new message to the array of messages held in state.");'
- - text: 'messageReducer должен возвращать текущее состояние, если messageReducer с любыми другими действиями.'
- testString: 'assert((function() { const addState = store.getState(); store.dispatch({type: "FAKE_ACTION"}); const testState = store.getState(); return (addState === testState); })(), "The messageReducer should return the current state if called with any other actions.");'
+ - text: The const ADD should exist and hold a value equal to the string ADD
+ testString: assert(ADD === 'ADD');
+ - text: The action creator addMessage should return an object with type equal to ADD and message equal to the message that is passed in.
+ testString: assert((function() { const addAction = addMessage('__TEST__MESSAGE__'); return addAction.type === ADD && addAction.message === '__TEST__MESSAGE__'; })());
+ - text: messageReducer should be a function.
+ testString: assert(typeof messageReducer === 'function');
+ - text: The store should exist and have an initial state set to an empty array.
+ testString: assert((function() { const initialState = store.getState(); return typeof store === 'object' && initialState.length === 0; })());
+ - text: Dispatching addMessage against the store should immutably add a new message to the array of messages held in state.
+ testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addMessage('__A__TEST__MESSAGE')); const addState = store.getState(); return (isFrozen && addState[0] === '__A__TEST__MESSAGE'); })());
+ - text: The messageReducer should return the current state if called with any other actions.
+ testString: 'assert((function() { const addState = store.getState(); store.dispatch({type: ''FAKE_ACTION''}); const testState = store.getState(); return (addState === testState); })());'
```
@@ -47,14 +51,34 @@ tests:
-
-
## Solution
-```js
-// solution required
+```jsx
+const ADD = 'ADD';
+
+const addMessage = (message) => {
+ return {
+ type: ADD,
+ message
+ }
+};
+
+const messageReducer = (state = [], action) => {
+ switch (action.type) {
+ case ADD:
+ return [
+ ...state,
+ action.message
+ ];
+ default:
+ return state;
+ }
+};
+
+const store = Redux.createStore(messageReducer);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.russian.md
index fc74a6fb57..2d6fd1818b 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036141
title: Getting Started with React Redux
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301430
localeTitle: Начало работы с React Redux
---
## Description
- Эта серия проблем знакомит с использованием Redux с React. Во-первых, рассмотрим некоторые ключевые принципы каждой технологии. Реагирование - это библиотека представлений, которую вы предоставляете с данными, а затем рендерит представление эффективным и предсказуемым образом. Redux - это система управления состоянием, которую вы можете использовать для упрощения управления состоянием вашего приложения. Как правило, в приложении React Redux вы создаете одно хранилище Redux, которое управляет состоянием всего вашего приложения. Ваши компоненты React подписываются только на части данных в магазине, которые имеют отношение к их роли. Затем вы отправляете действия непосредственно из компонентов React, которые затем запускают обновления магазина. Хотя компоненты React могут управлять своим собственным состоянием локально, когда у вас сложное приложение, обычно лучше поддерживать состояние приложения в одном месте с помощью Redux. Существуют исключения, когда отдельные компоненты могут иметь локальное состояние, специфичное только для них. Наконец, поскольку Redux не предназначен для работы с React из коробки, вам нужно использовать пакет react-redux . Он предоставляет вам возможность передать state Redux и dispatch ваши компоненты React в качестве props . В следующих нескольких задачах, во-первых, вы создадите простой компонент React, который позволит вам вводить новые текстовые сообщения. Они добавляются в массив, который отображается в представлении. Это должен быть хороший обзор того, что вы узнали на уроках React. Затем вы создадите хранилище Redux и действия, управляющие состоянием массива сообщений. Наконец, вы будете использовать react-redux для подключения хранилища Redux к вашему компоненту, тем самым извлекая локальное состояние в хранилище Redux.
+
+Эта серия проблем знакомит с использованием Redux с React. Во-первых, рассмотрим некоторые ключевые принципы каждой технологии. Реагирование - это библиотека представлений, которую вы предоставляете с данными, а затем рендерит представление эффективным и предсказуемым образом. Redux - это система управления состоянием, которую вы можете использовать для упрощения управления состоянием вашего приложения. Как правило, в приложении React Redux вы создаете одно хранилище Redux, которое управляет состоянием всего вашего приложения. Ваши компоненты React подписываются только на части данных в магазине, которые имеют отношение к их роли. Затем вы отправляете действия непосредственно из компонентов React, которые затем запускают обновления магазина. Хотя компоненты React могут управлять своим собственным состоянием локально, когда у вас сложное приложение, обычно лучше поддерживать состояние приложения в одном месте с помощью Redux. Существуют исключения, когда отдельные компоненты могут иметь локальное состояние, специфичное только для них. Наконец, поскольку Redux не предназначен для работы с React из коробки, вам нужно использовать пакет react-redux . Он предоставляет вам возможность передать state Redux и dispatch ваши компоненты React в качестве props . В следующих нескольких задачах, во-первых, вы создадите простой компонент React, который позволит вам вводить новые текстовые сообщения. Они добавляются в массив, который отображается в представлении. Это должен быть хороший обзор того, что вы узнали на уроках React. Затем вы создадите хранилище Redux и действия, управляющие состоянием массива сообщений. Наконец, вы будете использовать react-redux для подключения хранилища Redux к вашему компоненту, тем самым извлекая локальное состояние в хранилище Redux.
+
## Instructions
- Начните с компонента DisplayMessages . Добавьте конструктор к этому компоненту и инициализируйте его с состоянием, которое имеет два свойства: input , который установлен в пустую строку, и messages , которые установлены в пустой массив.
+
+Начните с компонента DisplayMessages . Добавьте конструктор к этому компоненту и инициализируйте его с состоянием, которое имеет два свойства: input , который установлен в пустую строку, и messages , которые установлены в пустой массив.
+
## Tests
```yml
tests:
- - text: Компонент DisplayMessages должен отображать пустой элемент div .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The DisplayMessages component should render an empty div element.");'
- - text: 'Конструктор DisplayMessages следует правильно называть super , передавая в props .'
- testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The DisplayMessages constructor should be called properly with super, passing in props.");'
- - text: 'Компонент DisplayMessages должен иметь начальное состояние, равное {input: "", messages: []} .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === "object" && initialState.input === "" && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), "The DisplayMessages component should have an initial state equal to {input: "", messages: []}.");'
+ - text: The DisplayMessages component should render an empty div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find('div').text() === '' })());
+ - text: The DisplayMessages constructor should be called properly with super, passing in props.
+ testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return noWhiteSpace.includes('constructor(props)') && noWhiteSpace.includes('super(props'); })());
+ - text: 'The DisplayMessages component should have an initial state equal to {input: "", messages: []}.'
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === 'object' && initialState.input === '' && Array.isArray(initialState.messages) && initialState.messages.length === 0; })());
```
@@ -48,12 +52,12 @@ class DisplayMessages extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
@@ -63,7 +67,19 @@ console.info('after the test');
## Solution
-```js
-// solution required
+```jsx
+class DisplayMessages extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ input: '',
+ messages: []
+ }
+ }
+ render() {
+ return
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/manage-state-locally-first.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/manage-state-locally-first.russian.md
index 92c5ab7045..dde220a260 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/manage-state-locally-first.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/manage-state-locally-first.russian.md
@@ -3,33 +3,39 @@ id: 5a24c314108439a4d4036142
title: Manage State Locally First
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301431
localeTitle: Управление состоянием локально сначала
---
## Description
- Здесь вы закончите создание компонента DisplayMessages .
+
+Здесь вы закончите создание компонента DisplayMessages .
+
## Instructions
- Во-первых, в методе render() компонент визуализирует элемент input элемент button элемент ul . Когда элемент input изменяется, он должен вызвать метод handleChange() . Кроме того, элемент input должен отображать значение input , находящееся в состоянии компонента. Элемент button должен запускать метод submitMessage() при нажатии. Во-вторых, напишите эти два метода. Метод handleChange() должен обновлять input с помощью input пользователем. Метод submitMessage() должен конкатенировать текущее сообщение (сохраненное на input ) в массив messages в локальном состоянии и очистить значение input . Наконец, используйте ul для сопоставления массива messages и отображения его на экране в виде списка элементов li .
+
+Во-первых, в методе render() компонент визуализирует элемент input элемент button элемент ul . Когда элемент input изменяется, он должен вызвать метод handleChange() . Кроме того, элемент input должен отображать значение input , находящееся в состоянии компонента. Элемент button должен запускать метод submitMessage() при нажатии. Во-вторых, напишите эти два метода. Метод handleChange() должен обновлять input с помощью input пользователем. Метод submitMessage() должен конкатенировать текущее сообщение (сохраненное на input ) в массив messages в локальном состоянии и очистить значение input . Наконец, используйте ul для сопоставления массива messages и отображения его на экране в виде списка элементов li .
+
## Tests
```yml
tests:
- - text: 'Компонент DisplayMessages должен инициализироваться с состоянием, равным { input: "", messages: [] } .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && initialState.input === "" && initialState.messages.length === 0); })(), "The DisplayMessages component should initialize with a state equal to { input: "", messages: [] }.");'
- - text: Компонент DisplayMessages должен отображать div содержащий элемент h2 элемент button элемент ul и элементы li качестве дочерних элементов.
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const state = () => { mockedComponent.setState({messages: ["__TEST__MESSAGE"]}); return waitForIt(() => mockedComponent )}; const updated = await state(); assert(updated.find("div").length === 1 && updated.find("h2").length === 1 && updated.find("button").length === 1 && updated.find("ul").length === 1, "The DisplayMessages component should render a div containing an h2 element, a button element, a ul element, and li elements as children."); }; '
- - text: Элемент input должен отображать значение input в локальном состоянии.
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const testValue = "__TEST__EVENT__INPUT"; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find("input").props().value === testValue, "The input element should render the value of input in local state."); }; '
- - text: Вызов метода handleChange должен обновить input значение в состоянии на текущий вход.
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = "__TEST__EVENT__MESSAGE__"; const changed = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const afterInput = await changed(); assert(initialState.input === "" && afterInput.state().input === "__TEST__EVENT__MESSAGE__", "Calling the method handleChange should update the input value in state to the current input."); }; '
- - text: При нажатии кнопки « Add message следует вызвать метод submitMessage который должен добавить текущий input в массив messages в состоянии.
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage_1 = "__FIRST__MESSAGE__"; const firstChange = () => { causeChange(mockedComponent, testMessage_1); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit_1 = await firstSubmit(); const submitState_1 = afterSubmit_1.state(); const testMessage_2 = "__SECOND__MESSAGE__"; const secondChange = () => { causeChange(mockedComponent, testMessage_2); return waitForIt(() => mockedComponent )}; const secondResult = await secondChange(); const secondSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit_2 = await secondSubmit(); const submitState_2 = afterSubmit_2.state(); assert(initialState.messages.length === 0 && submitState_1.messages.length === 1 && submitState_2.messages.length === 2 && submitState_2.messages[1] === testMessage_2, "Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state."); }; '
- - text: Метод submitMessage должен очищать текущий ввод.
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find("input").simulate("change", { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = "__FIRST__MESSAGE__"; const firstChange = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstState = firstResult.state(); const firstSubmit = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent )}; const afterSubmit = await firstSubmit(); const submitState = afterSubmit.state(); assert(firstState.input === testMessage && submitState.input === "", "The submitMessage method should clear the current input."); }; '
+ - text: 'The DisplayMessages component should initialize with a state equal to { input: "", messages: [] }.'
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && initialState.input === '' && initialState.messages.length === 0); })());
+ - text: The DisplayMessages component should render a div containing an h2 element, a button element, a ul element, and li elements as children.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const state = () => { mockedComponent.setState({messages: [''__TEST__MESSAGE'']}); return waitForIt(() => mockedComponent )}; const updated = await state(); assert(updated.find(''div'').length === 1 && updated.find(''h2'').length === 1 && updated.find(''button'').length === 1 && updated.find(''ul'').length === 1 && updated.find(''li'').length > 0); }; '
+ - text: .map was used on the messages array.
+ testString: assert(code.match(/this\.state\.messages\.map/g));
+ - text: The input element should render the value of input in local state.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const testValue = ''__TEST__EVENT__INPUT''; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find(''input'').props().value === testValue); }; '
+ - text: Calling the method handleChange should update the input value in state to the current input.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = ''__TEST__EVENT__MESSAGE__''; const changed = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const afterInput = await changed(); assert(initialState.input === '''' && afterInput.state().input === ''__TEST__EVENT__MESSAGE__''); }; '
+ - text: Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage_1 = ''__FIRST__MESSAGE__''; const firstChange = () => { causeChange(mockedComponent, testMessage_1); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstSubmit = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterSubmit_1 = await firstSubmit(); const submitState_1 = afterSubmit_1.state(); const testMessage_2 = ''__SECOND__MESSAGE__''; const secondChange = () => { causeChange(mockedComponent, testMessage_2); return waitForIt(() => mockedComponent )}; const secondResult = await secondChange(); const secondSubmit = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterSubmit_2 = await secondSubmit(); const submitState_2 = afterSubmit_2.state(); assert(initialState.messages.length === 0 && submitState_1.messages.length === 1 && submitState_2.messages.length === 2 && submitState_2.messages[1] === testMessage_2); }; '
+ - text: The submitMessage method should clear the current input.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = ''__FIRST__MESSAGE__''; const firstChange = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstState = firstResult.state(); const firstSubmit = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent )}; const afterSubmit = await firstSubmit(); const submitState = afterSubmit.state(); assert(firstState.input === testMessage && submitState.input === ''''); }; '
```
@@ -45,7 +51,7 @@ class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
- input: ",
+ input: '',
messages: []
}
}
@@ -67,12 +73,12 @@ class DisplayMessages extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-dispatch-to-props.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-dispatch-to-props.russian.md
index 7aa25cabe8..be079b35c3 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-dispatch-to-props.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-dispatch-to-props.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036146
title: Map Dispatch to Props
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301432
localeTitle: Отправка карты на реквизит
---
## Description
- Функция mapDispatchToProps() используется для предоставления конкретным создателям действий вашим компонентам React, чтобы они могли отправлять действия против магазина Redux. Он похож по структуре на mapStateToProps() вы написали в последнем вызове. Он возвращает объект, который сопоставляет действия отправки с именами свойств, которые становятся компонентами props . Однако вместо возврата части state каждое свойство возвращает функцию, которая вызывает dispatch с создателем действия и любыми соответствующими действительными данными. У вас есть доступ к этой dispatch потому что она передается в mapDispatchToProps() в качестве параметра, когда вы определяете функцию, точно так же, как вы передали statemapStateToProps() . За кулисами React Redux использует store.dispatch() Redux для store.dispatch() этих рассылок с помощью mapDispatchToProps() . Это похоже на то, как он использует store.subscribe() для компонентов, которые отображаются в state . Например, у вас есть создатель действия loginUser() который принимает username в качестве полезной нагрузки. Объект, возвращенный из mapDispatchToProps() для этого создателя действия, будет выглядеть примерно так:
+
+Функция mapDispatchToProps() используется для предоставления конкретным создателям действий вашим компонентам React, чтобы они могли отправлять действия против магазина Redux. Он похож по структуре на mapStateToProps() вы написали в последнем вызове. Он возвращает объект, который сопоставляет действия отправки с именами свойств, которые становятся компонентами props . Однако вместо возврата части state каждое свойство возвращает функцию, которая вызывает dispatch с создателем действия и любыми соответствующими действительными данными. У вас есть доступ к этой dispatch потому что она передается в mapDispatchToProps() в качестве параметра, когда вы определяете функцию, точно так же, как вы передали statemapStateToProps() . За кулисами React Redux использует store.dispatch() Redux для store.dispatch() этих рассылок с помощью mapDispatchToProps() . Это похоже на то, как он использует store.subscribe() для компонентов, которые отображаются в state . Например, у вас есть создатель действия loginUser() который принимает username в качестве полезной нагрузки. Объект, возвращенный из mapDispatchToProps() для этого создателя действия, будет выглядеть примерно так:
+
## Instructions
- Редактор кода предоставляет создателя действия, называемого addMessage() . Напишите функцию mapDispatchToProps() которая принимает dispatch в качестве аргумента, а затем возвращает объект. Объект должен иметь свойство submitNewMessage установленное для функции отправки, которое принимает параметр для добавления нового сообщения при отправке addMessage() .
+
+Редактор кода предоставляет создателя действия, называемого addMessage() . Напишите функцию mapDispatchToProps() которая принимает dispatch в качестве аргумента, а затем возвращает объект. Объект должен иметь свойство submitNewMessage установленное для функции отправки, которое принимает параметр для добавления нового сообщения при отправке addMessage() .
+
## Tests
```yml
tests:
- - text: addMessage должен возвращать объект с type ключа и message .
- testString: 'assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty("type") && addMessageTest.hasOwnProperty("message")); })(), "addMessage should return an object with keys type and message.");'
- - text: mapDispatchToProps должна быть функцией.
- testString: 'assert(typeof mapDispatchToProps === "function", "mapDispatchToProps should be a function.");'
- - text: mapDispatchToProps должен возвращать объект.
- testString: 'assert(typeof mapDispatchToProps() === "object", "mapDispatchToProps should return an object.");'
- - text: Отправка addMessage с submitNewMessage из mapDispatchToProps должна вернуть сообщение функции отправки.
- testString: 'assert((function() { let testAction; const dispatch = (fn) => { testAction = fn; }; let dispatchFn = mapDispatchToProps(dispatch); dispatchFn.submitNewMessage("__TEST__MESSAGE__"); return (testAction.type === "ADD" && testAction.message === "__TEST__MESSAGE__"); })(), "Dispatching addMessage with submitNewMessage from mapDispatchToProps should return a message to the dispatch function.");'
+ - text: addMessage should return an object with keys type and message.
+ testString: assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty('type') && addMessageTest.hasOwnProperty('message')); })());
+ - text: mapDispatchToProps should be a function.
+ testString: assert(typeof mapDispatchToProps === 'function');
+ - text: mapDispatchToProps should return an object.
+ testString: assert(typeof mapDispatchToProps() === 'object');
+ - text: Dispatching addMessage with submitNewMessage from mapDispatchToProps should return a message to the dispatch function.
+ testString: assert((function() { let testAction; const dispatch = (fn) => { testAction = fn; }; let dispatchFn = mapDispatchToProps(dispatch); dispatchFn.submitNewMessage('__TEST__MESSAGE__'); return (testAction.type === 'ADD' && testAction.message === '__TEST__MESSAGE__'); })());
```
@@ -50,14 +54,28 @@ const addMessage = (message) => {
-
-
## Solution
-```js
-// solution required
+```jsx
+const addMessage = (message) => {
+ return {
+ type: 'ADD',
+ message: message
+ }
+};
+
+// change code below this line
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ submitNewMessage: function(message) {
+ dispatch(addMessage(message));
+ }
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-state-to-props.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-state-to-props.russian.md
index 609a8be1dc..7a1bb5d64e 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-state-to-props.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/map-state-to-props.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036145
title: Map State to Props
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301433
localeTitle: Состояние карты для реквизита
---
## Description
- Компонент Provider позволяет вам предоставлять state и dispatch ваши компоненты React, но вы должны точно указать, какое состояние и действия вы хотите. Таким образом, вы убедитесь, что каждый компонент имеет доступ только к состоянию, в котором он нуждается. Вы достигаете этого, создавая две функции: mapStateToProps() и mapDispatchToProps() . В этих функциях вы объявляете, какие части состояния вы хотите иметь доступ и какие создатели действий вы должны иметь возможность отправлять. После того, как эти функции находятся в месте, вы увидите , как использовать Реагировать Redux connect метод , чтобы соединить их к компонентам в другом вызове. Примечание. За кулисами React Redux использует метод store.subscribe() для реализации mapStateToProps() .
+
+Компонент Provider позволяет вам предоставлять state и dispatch ваши компоненты React, но вы должны точно указать, какое состояние и действия вы хотите. Таким образом, вы убедитесь, что каждый компонент имеет доступ только к состоянию, в котором он нуждается. Вы достигаете этого, создавая две функции: mapStateToProps() и mapDispatchToProps() . В этих функциях вы объявляете, какие части состояния вы хотите иметь доступ и какие создатели действий вы должны иметь возможность отправлять. После того, как эти функции находятся в месте, вы увидите , как использовать Реагировать Redux connect метод , чтобы соединить их к компонентам в другом вызове. Примечание. За кулисами React Redux использует метод store.subscribe() для реализации mapStateToProps() .
+
## Instructions
- Создайте функцию mapStateToProps() . Эта функция должна принимать state как аргумент, а затем возвращать объект, который отображает это состояние в имена конкретных свойств. Эти свойства станут доступными для вашего компонента через props . Поскольку этот пример поддерживает все состояние приложения в одном массиве, вы можете передать это целое состояние вашему компоненту. Создайте messages свойств в возвращаемом объекте и установите его state .
+
+Создайте функцию mapStateToProps() . Эта функция должна принимать state как аргумент, а затем возвращать объект, который отображает это состояние в имена конкретных свойств. Эти свойства станут доступными для вашего компонента через props . Поскольку этот пример поддерживает все состояние приложения в одном массиве, вы можете передать это целое состояние вашему компоненту. Создайте messages свойств в возвращаемом объекте и установите его state .
+
## Tests
```yml
tests:
- - text: Конст state должно быть пустым массивом.
- testString: 'assert(Array.isArray(state) && state.length === 0, "The const state should be an empty array.");'
- - text: mapStateToProps должна быть функцией.
- testString: 'assert(typeof mapStateToProps === "function", "mapStateToProps should be a function.");'
- - text: mapStateToProps должен возвращать объект.
- testString: 'assert(typeof mapStateToProps() === "object", "mapStateToProps should return an object.");'
- - text: 'Передача массива как состояния в mapStateToProps должна вернуть этот массив, назначенный для ключа messages .'
- testString: 'assert(mapStateToProps(["messages"]).messages.pop() === "messages", "Passing an array as state to mapStateToProps should return this array assigned to a key of messages.");'
+ - text: The const state should be an empty array.
+ testString: assert(Array.isArray(state) && state.length === 0);
+ - text: mapStateToProps should be a function.
+ testString: assert(typeof mapStateToProps === 'function');
+ - text: mapStateToProps should return an object.
+ testString: assert(typeof mapStateToProps() === 'object');
+ - text: Passing an array as state to mapStateToProps should return this array assigned to a key of messages.
+ testString: assert(mapStateToProps(['messages']).messages.pop() === 'messages');
```
@@ -45,14 +49,21 @@ const state = [];
-
-
## Solution
-```js
-// solution required
+```jsx
+const state = [];
+
+// change code below this line
+
+const mapStateToProps = (state) => {
+ return {
+ messages: state
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/moving-forward-from-here.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/moving-forward-from-here.russian.md
index ae993bdcad..af22c4154d 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/moving-forward-from-here.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/moving-forward-from-here.russian.md
@@ -3,23 +3,27 @@ id: 5a24c314108439a4d403614a
title: Moving Forward From Here
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301434
localeTitle: Перемещение вперед
---
## Description
- Поздравляем! Вы закончили занятия по Реакту и Редьюксу. Перед тем, как двигаться дальше, нужно указать один последний предмет. Как правило, вы не будете писать приложения React в редакторе кода, как это. Эта задача дает вам представление о том, как выглядит синтаксис, если вы работаете с npm и файловой системой на своей собственной машине. Код должен выглядеть аналогично, за исключением использования операторов import (они охватывают все зависимости, которые были предоставлены вам в задачах). Раздел «Управление пакетами с номером npm» охватывает npm более подробно. Наконец, для написания кода React и Redux обычно требуется некоторая конфигурация. Это может быстро усложниться. Если вы заинтересованы в экспериментировании на своей собственной машине, приложение Create React будет настроено и готово к работе. Кроме того, вы можете включить Babel в качестве препроцессора JavaScript в CodePen, добавить React и ReactDOM в качестве внешних ресурсов JavaScript и работать там.
+
+Поздравляем! Вы закончили занятия по Реакту и Редьюксу. Перед тем, как двигаться дальше, нужно указать один последний предмет. Как правило, вы не будете писать приложения React в редакторе кода, как это. Эта задача дает вам представление о том, как выглядит синтаксис, если вы работаете с npm и файловой системой на своей собственной машине. Код должен выглядеть аналогично, за исключением использования операторов import (они охватывают все зависимости, которые были предоставлены вам в задачах). Раздел «Управление пакетами с номером npm» охватывает npm более подробно. Наконец, для написания кода React и Redux обычно требуется некоторая конфигурация. Это может быстро усложниться. Если вы заинтересованы в экспериментировании на своей собственной машине, приложение Create React будет настроено и готово к работе. Кроме того, вы можете включить Babel в качестве препроцессора JavaScript в CodePen, добавить React и ReactDOM в качестве внешних ресурсов JavaScript и работать там.
+
## Instructions
- Запишите сообщение 'Now I know React and Redux!' на консоль.
+
+Запишите сообщение 'Now I know React and Redux!' на консоль.
+
## Tests
```yml
tests:
- - text: Сообщение Now I know React and Redux! должен быть зарегистрирован на консоли.
- testString: 'assert(editor.getValue().includes("console.log("Now I know React and Redux!")") || editor.getValue().includes("console.log(\"Now I know React and Redux!\")"), "The message Now I know React and Redux! should be logged to the console.");'
+ - text: The message Now I know React and Redux! should be logged to the console.
+ testString: getUserInput => assert(/console.log\(("|')Now I know React and Redux!\1\)/.test(getUserInput('index')));
```
@@ -58,14 +62,13 @@ tests:
-
-
## Solution
-```js
-// solution required
+```jsx
+console.log('Now I know React and Redux!');
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.russian.md
index 7749586310..0e87e099b2 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.russian.md
@@ -3,29 +3,34 @@ id: 5a24c314108439a4d4036144
title: Use Provider to Connect Redux to React
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301435
localeTitle: Использовать Провайдер для подключения Redux к действию
---
## Description
- В последней задаче вы создали хранилище Redux для обработки массива сообщений и создали действие для добавления новых сообщений. Следующим шагом будет предоставление доступа React к хранилищу Redux и действия, необходимые для отправки обновлений. React Redux предоставляет пакет react-redux для выполнения этих задач. React Redux предоставляет небольшой API с двумя ключевыми функциями: Provider и connect . Другая проблема connect . Provider - это оболочка из React Redux, которая обертывает ваше приложение React. Затем этот обертку позволяет вам получить доступ к функциям store Redux и функции dispatch во всем дереве компонентов. Provider берет два реквизита, магазин Redux и дочерние компоненты вашего приложения. Определение Provider для компонента приложения может выглядеть так:
+
+В последней задаче вы создали хранилище Redux для обработки массива сообщений и создали действие для добавления новых сообщений. Следующим шагом будет предоставление доступа React к хранилищу Redux и действия, необходимые для отправки обновлений. React Redux предоставляет пакет react-redux для выполнения этих задач. React Redux предоставляет небольшой API с двумя ключевыми функциями: Provider и connect . Другая проблема connect . Provider - это оболочка из React Redux, которая обертывает ваше приложение React. Затем этот обертку позволяет вам получить доступ к функциям store Redux и функции dispatch во всем дереве компонентов. Provider берет два реквизита, магазин Redux и дочерние компоненты вашего приложения. Определение Provider для компонента приложения может выглядеть так:
+
## Instructions
-undefined
+
+The code editor now shows all your Redux and React code from the past several challenges. It includes the Redux store, actions, and the DisplayMessages component. The only new piece is the AppWrapper component at the bottom. Use this top level component to render the Provider from ReactRedux, and pass the Redux store as a prop. Then render the DisplayMessages component as a child. Once you are finished, you should see your React component rendered to the page.
+Note: React Redux is available as a global variable here, so you can access the Provider with dot notation. The code in the editor takes advantage of this and sets it to a constant Provider for you to use in the AppWrapper render method.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The AppWrapper should render.");'
- - text: 'Компонент обертки Provider должен иметь пропущенное store , равное хранилищу Redux.'
- testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput("index").replace(/\s/g,"").includes(""); })(), "The Provider wrapper component should have a prop of store passed to it, equal to the Redux store.");'
- - text: DisplayMessages должен отображаться как ребенок AppWrapper .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").find("DisplayMessages").length === 1; })(), "DisplayMessages should render as a child of AppWrapper.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h2").length === 1 && mockedComponent.find("button").length === 1 && mockedComponent.find("ul").length === 1; })(), "The DisplayMessages component should render an h2, input, button, and ul element.");'
+ - text: The AppWrapper should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })());
+ - text: The Provider wrapper component should have a prop of store passed to it, equal to the Redux store.
+ testString: getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput('index').replace(/\s/g,'').includes(''); })());
+ - text: DisplayMessages should render as a child of AppWrapper.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').find('DisplayMessages').length === 1; })());
+ - text: The DisplayMessages component should render an h2, input, button, and ul element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h2').length === 1 && mockedComponent.find('button').length === 1 && mockedComponent.find('ul').length === 1; })());
```
@@ -69,7 +74,7 @@ class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
- input: ",
+ input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
@@ -83,7 +88,7 @@ class DisplayMessages extends React.Component {
submitMessage() {
const currentMessage = this.state.input;
this.setState({
- input: ",
+ input: '',
messages: this.state.messages.concat(currentMessage)
});
}
@@ -120,12 +125,12 @@ class AppWrapper extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
+
+const Provider = ReactRedux.Provider;
+
+class AppWrapper extends React.Component {
+ // change code below this line
+ render() {
+ return (
+
+
+
+ );
+ }
+ // change code above this line
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/access-props-using-this.props.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/access-props-using-this.props.russian.md
index 8e60239f2c..0102e1bdec 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/access-props-using-this.props.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/access-props-using-this.props.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d403616e
title: Access Props Using this.props
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301375
localeTitle: Доступ к реквизитам с помощью this.props
---
## Description
- Последние несколько проблем касались основных способов передачи реквизита дочерним компонентам. Но что, если дочерний компонент, которому вы передаете реквизит, является компонентом класса ES6, а не функциональным компонентом без состояния? Компонент класса ES6 использует несколько другое соглашение для доступа к реквизитам. Каждый раз, когда вы ссылаетесь на компонент класса внутри себя, вы используете ключевое слово this . Чтобы получить доступ к реквизиту в компоненте класса, вы начинаете код, используемый для доступа к нему с this . Например, если компонент класса ES6 имеет ревизит под названием data , вы пишете {this.props.data} в JSX.
+
+Последние несколько проблем касались основных способов передачи реквизита дочерним компонентам. Но что, если дочерний компонент, которому вы передаете реквизит, является компонентом класса ES6, а не функциональным компонентом без состояния? Компонент класса ES6 использует несколько другое соглашение для доступа к реквизитам. Каждый раз, когда вы ссылаетесь на компонент класса внутри себя, вы используете ключевое слово this . Чтобы получить доступ к реквизиту в компоненте класса, вы начинаете код, используемый для доступа к нему с this . Например, если компонент класса ES6 имеет ревизит под названием data , вы пишете {this.props.data} в JSX.
+
## Instructions
- Визуализируйте инстанцию компонента ReturnTempPassword в родительском компоненте ResetPassword . Здесь дайте ReturnTempPassword реквизит от tempPassword и присвойте ему значение строки длиной не менее 8 символов. Внутри дочернего елемента ReturnTempPassword , обратитесь к реквизиту tempPassword в тегах strong , чтобы убедиться, что пользователь видит временный пароль.
+
+Визуализируйте инстанцию компонента ReturnTempPassword в родительском компоненте ResetPassword . Здесь дайте ReturnTempPassword реквизит от tempPassword и присвойте ему значение строки длиной не менее 8 символов. Внутри дочернего елемента ReturnTempPassword , обратитесь к реквизиту tempPassword в тегах strong , чтобы убедиться, что пользователь видит временный пароль.
+
## Tests
```yml
tests:
- - text: Компонент ResetPassword должен возвращать один элемент div .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === "div"; })(), "The ResetPassword component should return a single div element.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === "ReturnTempPassword"; })(), "The fourth child of ResetPassword should be the ReturnTempPassword component.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The ReturnTempPassword component should have a prop called tempPassword.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find("ReturnTempPassword").props().tempPassword; return typeof temp === "string" && temp.length >= 8; })(), "The tempPassword prop of ReturnTempPassword should be equal to a string of at least 8 characters.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("strong").text() === mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The ReturnTempPassword component should display the password you create as the tempPassword prop within strong tags.");'
+ - text: The ResetPassword component should return a single div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === 'div'; })());
+ - text: The fourth child of ResetPassword should be the ReturnTempPassword component.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'; })());
+ - text: The ReturnTempPassword component should have a prop called tempPassword.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('ReturnTempPassword').props().tempPassword; })());
+ - text: The tempPassword prop of ReturnTempPassword should be equal to a string of at least 8 characters.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find('ReturnTempPassword').props().tempPassword; return typeof temp === 'string' && temp.length >= 8; })());
+ - text: The ReturnTempPassword component should display the password you create as the tempPassword prop within strong tags.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('strong').text() === mockedComponent.find('ReturnTempPassword').props().tempPassword; })());
```
@@ -78,12 +82,12 @@ class ResetPassword extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
Please reset this password from your account settings ASAP.
+ { /* change code below this line */ }
+
+ { /* change code above this line */ }
+
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/add-comments-in-jsx.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/add-comments-in-jsx.russian.md
index e0dc9f1865..209aa16808 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/add-comments-in-jsx.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/add-comments-in-jsx.russian.md
@@ -3,29 +3,35 @@ id: 5a24bbe0dba28a8d3cbd4c5e
title: Add Comments in JSX
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301376
localeTitle: Добавить комментарии в JSX
---
## Description
- JSX - это синтаксис, который компилируется в действительный JavaScript. Иногда для удобства чтения вам может потребоваться добавить комментарии к вашему коду. Как и большинство языков программирования, JSX имеет свой собственный способ сделать это. Чтобы помещать комментарии в JSX, вы используете синтаксис {/* */} чтобы обернуть текст комментария.
+
+JSX - это синтаксис, который компилируется в действительный JavaScript. Иногда для удобства чтения вам может потребоваться добавить комментарии к вашему коду. Как и большинство языков программирования, JSX имеет свой собственный способ сделать это. Чтобы помещать комментарии в JSX, вы используете синтаксис {/* */} чтобы обернуть текст комментария.
+
## Instructions
- Редактор кода имеет элемент JSX, похожий на то, что вы создали в последнем вызове. Добавьте комментарий где-нибудь внутри предоставленного элемента div , не изменяя существующие элементы h1 или p .
+
+Редактор кода имеет элемент JSX, похожий на то, что вы создали в последнем вызове. Добавьте комментарий где-нибудь внутри предоставленного элемента div , не изменяя существующие элементы h1 или p .
+
## Tests
```yml
tests:
- - text: Постоянный JSX должен возвращать элемент div .
- testString: 'assert(JSX.type === "div", "The constant JSX should return a div element.");'
- - text: div должен содержать тег h1 как первый элемент.
- testString: 'assert(JSX.props.children[0].type === "h1", "The div should contain an h1 tag as the first element.");'
- - text: В div должен быть тег p как второй элемент.
- testString: 'assert(JSX.props.children[1].type === "p", "The div should contain a p tag as the second element.");'
- - text: JSX должен содержать комментарий.
- testString: 'getUserInput => assert(getUserInput("index").includes("/*") && getUserInput("index").includes("*/"), "The JSX should include a comment.");'
+ - text: The constant JSX should return a div element.
+ testString: assert(JSX.type === 'div');
+ - text: The div should contain an h1 tag as the first element.
+ testString: assert(JSX.props.children[0].type === 'h1');
+ - text: The div should contain a p tag as the second element.
+ testString: assert(JSX.props.children[1].type === 'p');
+ - text: The existing h1 and p elements should not be modified.
+ testString: assert(JSX.props.children[0].props.children === 'This is a block of JSX' && JSX.props.children[1].props.children === 'Here\'s a subtitle');
+ - text: The JSX should use valid comment syntax.
+ testString: assert(/
);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/add-event-listeners.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/add-event-listeners.russian.md
index c2b846366e..a1b51c33ab 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/add-event-listeners.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/add-event-listeners.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d403617e
title: Add Event Listeners
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301377
localeTitle: Добавить слушателей событий
---
## Description
- Метод componentDidMount() также является лучшим местом для присоединения любых прослушивателей событий, которые необходимо добавить для определенных функций. React предоставляет синтетическую систему событий, которая обертывает родную систему событий браузеров. Это означает, что синтетическая система событий ведет себя точно так же, независимо от браузера пользователя, даже если родные события могут вести себя по-разному между разными браузерами. Вы уже использовали некоторые из этих синтетических обработчиков событий, таких как onClick() . Синтетическая система событий React отлично подходит для большинства взаимодействий, которые вы будете использовать для элементов DOM. Однако, если вы хотите присоединить обработчик событий к объектам документа или окна, вы должны сделать это напрямую.
+
+Метод componentDidMount() также является лучшим местом для присоединения любых прослушивателей событий, которые необходимо добавить для определенных функций. React предоставляет синтетическую систему событий, которая обертывает родную систему событий браузеров. Это означает, что синтетическая система событий ведет себя точно так же, независимо от браузера пользователя, даже если родные события могут вести себя по-разному между разными браузерами. Вы уже использовали некоторые из этих синтетических обработчиков событий, таких как onClick() . Синтетическая система событий React отлично подходит для большинства взаимодействий, которые вы будете использовать для элементов DOM. Однако, если вы хотите присоединить обработчик событий к объектам документа или окна, вы должны сделать это напрямую.
+
## Instructions
- Приложи слушатель событий в методе componentDidMount() для событий keydown и заставь эти события вызывать функцию обратного вызова handleKeyPress() . Вы можете использовать document.addEventListener() который принимает событие (в кавычках) в качестве первого аргумента и обратный вызов в качестве второго аргумента. Затем в componentWillUnmount() удалите этот же прослушиватель событий. Вы можете передать те же аргументы в document.removeEventListener() . Хорошей практикой является использование этого метода жизненного цикла для любой очистки компонентов React перед их размонтированием и уничтожением. Удаление прослушивателей событий является примером одного из таких действий по очистке.
+
+Приложи слушатель событий в методе componentDidMount() для событий keydown и заставь эти события вызывать функцию обратного вызова handleKeyPress() . Вы можете использовать document.addEventListener() который принимает событие (в кавычках) в качестве первого аргумента и обратный вызов в качестве второго аргумента. Затем в componentWillUnmount() удалите этот же прослушиватель событий. Вы можете передать те же аргументы в document.removeEventListener() . Хорошей практикой является использование этого метода жизненного цикла для любой очистки компонентов React перед их размонтированием и уничтожением. Удаление прослушивателей событий является примером одного из таких действий по очистке.
+
## Tests
```yml
tests:
- - text: MyComponent должен отображать элемент div который обертывает тег h1 .
- testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").children().find("h1").length === 1; })(), "MyComponent should render a div element which wraps an h1 tag.");'
- - text: Слушатель keydown должен быть прикреплен к документу в componentDidMount .
- testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp("document\.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress").test(didMountString); })(), "A keydown listener should be attached to the document in componentDidMount.");'
- - text: Слушатель keydown должен быть удален из документа в componentWillUnmount .
- testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp("document\.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress").test(willUnmountString); })(), "The keydown listener should be removed from the document in componentWillUnmount.");'
- - text: 'Как только компонент смонтирован, нажатие enter должно обновить его состояние и обработанный тег h1 .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state("message"); const beforeText = mockedComponent.find("h1").text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state("message"), text: mockedComponent.find("h1").text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text, "Once the component has mounted, pressing enter should update its state and the rendered h1 tag."); }; '
+ - text: MyComponent should render a div element which wraps an h1 tag.
+ testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').children().find('h1').length === 1; })());
+ - text: A keydown listener should be attached to the document in componentDidMount.
+ testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp('document\.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress').test(didMountString); })());
+ - text: The keydown listener should be removed from the document in componentWillUnmount.
+ testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp('document\.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress').test(willUnmountString); })());
+ - text: Once the component has mounted, pressing enter should update its state and the rendered h1 tag.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state(''message''); const beforeText = mockedComponent.find(''h1'').text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state(''message''), text: mockedComponent.find(''h1'').text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text); }; '
```
@@ -41,7 +45,7 @@ class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
- message: "
+ message: ''
};
this.handleEnter = this.handleEnter.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
@@ -77,12 +81,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/add-inline-styles-in-react.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/add-inline-styles-in-react.russian.md
index 8c07f2ce6f..be1d4c3836 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/add-inline-styles-in-react.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/add-inline-styles-in-react.russian.md
@@ -3,33 +3,37 @@ id: 5a24c314108439a4d4036182
title: Add Inline Styles in React
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301378
localeTitle: Добавить встроенные стили в действии
---
## Description
- Возможно, вы заметили в последнем случае, что в дополнение к атрибуту style установленному для объекта JavaScript, было несколько других различий синтаксиса из встроенных стилей HTML. Во-первых, имена некоторых свойств стиля CSS используют случай верблюда. Например, последний вызов задает размер шрифта с fontSize вместо font-size . Переплетенные слова, такие как font-size являются недопустимым синтаксисом для свойств объекта JavaScript, поэтому React использует случай верблюда. Как правило, любые свойства дефисного стиля записываются с использованием верблюжьего случая в JSX. Предполагается, что все единицы длины значения свойства (например, height , width и fontSize ) находятся в px если не указано иное. Если вы хотите использовать em , например, вы переносите значение и единицы в кавычки, например {fontSize: "4em"} . Помимо значений длины, которые по умолчанию px , все остальные значения свойств должны быть заключены в кавычки.
+
+Возможно, вы заметили в последнем случае, что в дополнение к атрибуту style установленному для объекта JavaScript, было несколько других различий синтаксиса из встроенных стилей HTML. Во-первых, имена некоторых свойств стиля CSS используют случай верблюда. Например, последний вызов задает размер шрифта с fontSize вместо font-size . Переплетенные слова, такие как font-size являются недопустимым синтаксисом для свойств объекта JavaScript, поэтому React использует случай верблюда. Как правило, любые свойства дефисного стиля записываются с использованием верблюжьего случая в JSX. Предполагается, что все единицы длины значения свойства (например, height , width и fontSize ) находятся в px если не указано иное. Если вы хотите использовать em , например, вы переносите значение и единицы в кавычки, например {fontSize: "4em"} . Помимо значений длины, которые по умолчанию px , все остальные значения свойств должны быть заключены в кавычки.
+
## Instructions
-undefined
+
+If you have a large set of styles, you can assign a style object to a constant to keep your code organized. Uncomment the styles constant and declare an object with three style properties and their values. Give the div a color of "purple", a font-size of 40, and a border of "2px solid purple". Then set the style attribute equal to the styles constant.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert(Object.keys(styles).length === 3, "The styles variable should be an object with three properties.");'
- - text: ''
- testString: 'assert(styles.color === "purple", "The styles variable should have a color property set to a value of purple.");'
- - text: ''
- testString: 'assert(styles.fontSize === 40, "The styles variable should have a fontSize property set to a value of 40.");'
- - text: ''
- testString: 'assert(styles.border === "2px solid purple", "The styles variable should have a border property set to a value of 2px solid purple.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a div element.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), "The div element should have its styles defined by the styles object.");'
+ - text: The styles variable should be an object with three properties.
+ testString: assert(Object.keys(styles).length === 3);
+ - text: The styles variable should have a color property set to a value of purple.
+ testString: assert(styles.color === 'purple');
+ - text: The styles variable should have a fontSize property set to a value of 40.
+ testString: assert(styles.fontSize === 40);
+ - text: The styles variable should have a border property set to a value of 2px solid purple.
+ testString: assert(styles.border === "2px solid purple");
+ - text: The component should render a div element.
+ testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })());
+ - text: The div element should have its styles defined by the styles object.
+ testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })());
```
@@ -57,12 +61,12 @@ class Colorful extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ // change code above this line
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/bind-this-to-a-class-method.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/bind-this-to-a-class-method.russian.md
index cda2e77b96..f3cde9ef78 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/bind-this-to-a-class-method.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/bind-this-to-a-class-method.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036174
title: Bind 'this' to a Class Method
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301379
localeTitle: Привязать 'это' к методу класса
---
## Description
- В дополнение к настройке и обновлению state вы также можете определить методы для вашего класса компонента. Метод класса обычно должен использовать this ключевое слово, чтобы он мог обращаться к свойствам класса (например, state и props ) внутри области действия метода. Существует несколько способов разрешить доступ к this методам класса. Один из распространенных способов заключается в том, чтобы явно связать this в конструкторе, чтобы this стало привязано к методам класса, когда компонент инициализирован. Возможно, вы заметили, что последний вызов использовал this.handleClick = this.handleClick.bind(this) для его метода handleClick в конструкторе. Затем, когда вы вызываете функцию типа this.setState() внутри вашего метода класса, this относится к классу и не будет undefined . Примечание:this ключевое слово является одним из наиболее запутанных аспектов JavaScript , но он играет важную роль в React. Хотя его поведение здесь совершенно нормальное, эти уроки не являются местом для углубленного обзора this поэтому, пожалуйста, обратитесь к другим урокам, если приведенное выше смущает!
+
+В дополнение к настройке и обновлению state вы также можете определить методы для вашего класса компонента. Метод класса обычно должен использовать this ключевое слово, чтобы он мог обращаться к свойствам класса (например, state и props ) внутри области действия метода. Существует несколько способов разрешить доступ к this методам класса. Один из распространенных способов заключается в том, чтобы явно связать this в конструкторе, чтобы this стало привязано к методам класса, когда компонент инициализирован. Возможно, вы заметили, что последний вызов использовал this.handleClick = this.handleClick.bind(this) для его метода handleClick в конструкторе. Затем, когда вы вызываете функцию типа this.setState() внутри вашего метода класса, this относится к классу и не будет undefined . Примечание:this ключевое слово является одним из наиболее запутанных аспектов JavaScript , но он играет важную роль в React. Хотя его поведение здесь совершенно нормальное, эти уроки не являются местом для углубленного обзора this поэтому, пожалуйста, обратитесь к другим урокам, если приведенное выше смущает!
+
## Instructions
- Редактор кода имеет компонент с state которое отслеживает количество элементов. Он также имеет метод, который позволяет вам увеличивать количество этого элемента. Однако этот метод не работает , потому что он , используя this ключевое слово, которое не определено. Исправьте его, явно привязывая this к addItem() в конструкторе компонента. Затем добавьте обработчик кликов к элементу button в методе рендеринга. Он должен вызывать метод addItem() когда кнопка получает событие щелчка. Помните, что метод, который вы передаете обработчику onClick требует фигурных скобок, потому что его следует интерпретировать непосредственно как JavaScript. После того, как вы выполните вышеуказанные шаги, вы сможете щелкнуть по кнопке и увидеть инкремент количества элементов в HTML.
+
+Редактор кода имеет компонент с state которое отслеживает количество элементов. Он также имеет метод, который позволяет вам увеличивать количество этого элемента. Однако этот метод не работает , потому что он , используя this ключевое слово, которое не определено. Исправьте его, явно привязывая this к addItem() в конструкторе компонента. Затем добавьте обработчик кликов к элементу button в методе рендеринга. Он должен вызывать метод addItem() когда кнопка получает событие щелчка. Помните, что метод, который вы передаете обработчику onClick требует фигурных скобок, потому что его следует интерпретировать непосредственно как JavaScript. После того, как вы выполните вышеуказанные шаги, вы сможете щелкнуть по кнопке и увидеть инкремент количества элементов в HTML.
+
## Tests
```yml
tests:
- - text: 'MyComponent должен возвращать элемент div который обертывает два элемента, кнопку и элемент h1 в этом порядке.'
- testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("div").length === 1 && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(0).type() === "button" && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(1).type() === "h1", "MyComponent should return a div element which wraps two elements, a button and an h1 element, in that order.");'
- - text: 'Состояние MyComponent должно инициализироваться с помощью пары значений ключа { itemCount: 0 } .'
- testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("itemCount") === 0, "The state of MyComponent should initialize with the key value pair { itemCount: 0 }.");'
- - text: Нажатие на элемент button должно запускать метод addItem и увеличивать состояние itemCount на 1 .
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state("itemCount")); }; const second = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("itemCount")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, "Clicking the button element should run the addItem method and increment the state itemCount by 1."); };'
+ - text: MyComponent should return a div element which wraps two elements, a button and an h1 element, in that order.
+ testString: assert(Enzyme.mount(React.createElement(MyComponent)).find('div').length === 1 && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(0).type() === 'button' && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(1).type() === 'h1');
+ - text: 'The state of MyComponent should initialize with the key value pair { itemCount: 0 }.'
+ testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('itemCount') === 0);
+ - text: Clicking the button element should run the addItem method and increment the state itemCount by 1.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state(''itemCount'')); }; const second = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''itemCount'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1); };'
```
@@ -66,12 +70,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.russian.md
index ec663f18a0..e6fc3c820e 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d4036189
title: Change Inline CSS Conditionally Based on Component State
challengeType: 6
isRequired: false
-videoUrl: ''
-localeTitle: 'Изменение встроенного CSS, условно основанного на состоянии компонента'
+forumTopicId: 301380
+localeTitle: Изменение встроенного CSS, условно основанного на состоянии компонента
---
## Description
- На этом этапе вы видели несколько приложений условного рендеринга и использование встроенных стилей. Вот еще один пример, который объединяет обе эти темы. Вы также можете визуализировать CSS на основе состояния компонента React. Для этого вы проверяете условие, и если это условие выполнено, вы изменяете объект стилей, назначенный элементам JSX в методе рендеринга. Эта парадигма важна для понимания, потому что это драматический переход от более традиционного подхода применения стилей, изменяя непосредственно элементы DOM (что очень часто встречается с jQuery, например). В этом подходе вы должны отслеживать, когда элементы меняются, а также обрабатывать фактическую манипуляцию напрямую. Может быть сложно отслеживать изменения, потенциально делая ваш пользовательский интерфейс непредсказуемым. Когда вы устанавливаете объект стиля на основе условия, вы описываете, как пользовательский интерфейс должен выглядеть как функция состояния приложения. Существует четкий поток информации, который движется только в одном направлении. Это предпочтительный метод при написании приложений с помощью React.
+
+На этом этапе вы видели несколько приложений условного рендеринга и использование встроенных стилей. Вот еще один пример, который объединяет обе эти темы. Вы также можете визуализировать CSS на основе состояния компонента React. Для этого вы проверяете условие, и если это условие выполнено, вы изменяете объект стилей, назначенный элементам JSX в методе рендеринга. Эта парадигма важна для понимания, потому что это драматический переход от более традиционного подхода применения стилей, изменяя непосредственно элементы DOM (что очень часто встречается с jQuery, например). В этом подходе вы должны отслеживать, когда элементы меняются, а также обрабатывать фактическую манипуляцию напрямую. Может быть сложно отслеживать изменения, потенциально делая ваш пользовательский интерфейс непредсказуемым. Когда вы устанавливаете объект стиля на основе условия, вы описываете, как пользовательский интерфейс должен выглядеть как функция состояния приложения. Существует четкий поток информации, который движется только в одном направлении. Это предпочтительный метод при написании приложений с помощью React.
+
## Instructions
-undefined
+
+The code editor has a simple controlled input component with a styled border. You want to style this border red if the user types more than 15 characters of text in the input box. Add a condition to check for this and, if the condition is valid, set the input border style to 3px solid red. You can try it out by entering text in the input.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find("div").length === 1; })(), "The GateKeeper component should render a div element.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ""; })(), "The GateKeeper component should be initialized with a state key input set to an empty string.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find("h3").length === 1 && mockedComponent.find("input").length === 1; })(), "The GateKeeper component should render an h3 tag and an input tag.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find("input").props().style.border === "1px solid black"; })(), "The input tag should initially have a style of 1px solid black for the border property.");'
- - text: ''
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate("change", {target: {value}}); let initialStyle = mockedComponent.find("input").props().style.border; const state_1 = () => { mockedComponent.setState({input: "this is 15 char" }); return waitForIt(() => mockedComponent.find("input").props().style.border )}; const state_2 = () => { mockedComponent.setState({input: "A very long string longer than 15 characters." }); return waitForIt(() => mockedComponent.find("input").props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === "1px solid black" && style_1 === "1px solid black" && style_2 === "3px solid red", "The input tag should be styled with a border of 3px solid red if the input value in state is longer than 15 characters."); }; '
+ - text: The GateKeeper component should render a div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('div').length === 1; })());
+ - text: The GateKeeper component should be initialized with a state key input set to an empty string.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''; })());
+ - text: The GateKeeper component should render an h3 tag and an input tag.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('h3').length === 1 && mockedComponent.find('input').length === 1; })());
+ - text: The input tag should initially have a style of 1px solid black for the border property.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('input').props().style.border === '1px solid black'; })());
+ - text: The input tag should be styled with a border of 3px solid red if the input value in state is longer than 15 characters.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); let initialStyle = mockedComponent.find(''input'').props().style.border; const state_1 = () => { mockedComponent.setState({input: ''this is 15 char'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const state_2 = () => { mockedComponent.setState({input: ''A very long string longer than 15 characters.'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === ''1px solid black'' && style_1 === ''1px solid black'' && style_2 === ''3px solid red''); }; '
```
@@ -43,7 +47,7 @@ class GateKeeper extends React.Component {
constructor(props) {
super(props);
this.state = {
- input: "
+ input: ''
};
this.handleChange = this.handleChange.bind(this);
}
@@ -74,12 +78,12 @@ class GateKeeper extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/compose-react-components.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/compose-react-components.russian.md
index c9a67b8ea9..2954df9ea1 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/compose-react-components.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/compose-react-components.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036166
title: Compose React Components
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301381
localeTitle: Компоновка компонентов реакции
---
## Description
- Поскольку проблемы продолжают использовать более сложные композиции с компонентами React и JSX, есть еще один важный момент. Рендеринг компонентов класса стиля ES6 в других компонентах ничем не отличается от рендеринга простых компонентов, которые вы использовали в последних нескольких задачах. Вы можете отображать элементы JSX, функциональные компоненты без состояния и компоненты класса ES6 в других компонентах.
+
+Поскольку проблемы продолжают использовать более сложные композиции с компонентами React и JSX, есть еще один важный момент. Рендеринг компонентов класса стиля ES6 в других компонентах ничем не отличается от рендеринга простых компонентов, которые вы использовали в последних нескольких задачах. Вы можете отображать элементы JSX, функциональные компоненты без состояния и компоненты класса ES6 в других компонентах.
+
## Instructions
- В редакторе TypesOfFood компонент TypesOfFood уже выполняет компонент под названием « Vegetables . Кроме того, из последней задачи есть компонент Fruits . Гнездо два компонента внутри Fruits - сначала NonCitrus , а затем Citrus . Оба этих компонента предоставляются вам в фоновом режиме. Затем TypesOfFood компонент класса Fruits компонент TypesOfFood , ниже заголовка h1 и выше Vegetables . Результатом должен быть ряд вложенных компонентов, который использует два разных типа компонентов.
+
+В редакторе TypesOfFood компонент TypesOfFood уже выполняет компонент под названием « Vegetables . Кроме того, из последней задачи есть компонент Fruits . Гнездо два компонента внутри Fruits - сначала NonCitrus , а затем Citrus . Оба этих компонента предоставляются вам в фоновом режиме. Затем TypesOfFood компонент класса Fruits компонент TypesOfFood , ниже заголовка h1 и выше Vegetables . Результатом должен быть ряд вложенных компонентов, который использует два разных типа компонентов.
+
## Tests
```yml
tests:
- - text: Компонент TypesOfFood должен возвращать один элемент div .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The TypesOfFood component should return a single div element.");'
- - text: Компонент TypesOfFood должен вернуть компонент Fruits .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The TypesOfFood component should return the Fruits component.");'
- - text: Компонент Fruits должен вернуть компонент NonCitrus компонент Citrus .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find("Fruits").children().find("NonCitrus").length === 1 && mockedComponent.find("Fruits").children().find("Citrus").length === 1); })(), "The Fruits component should return the NonCitrus component and the Citrus component.");'
- - text: Компонент TypesOfFood должен вернуть компонент « Vegetables ниже компонента « Fruits .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The TypesOfFood component should return the Vegetables component below the Fruits component.");'
+ - text: The TypesOfFood component should return a single div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })());
+ - text: The TypesOfFood component should return the Fruits component.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })());
+ - text: The Fruits component should return the NonCitrus component and the Citrus component.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find('Fruits').children().find('NonCitrus').length === 1 && mockedComponent.find('Fruits').children().find('Citrus').length === 1); })());
+ - text: The TypesOfFood component should return the Vegetables component below the Fruits component.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })());
```
@@ -47,7 +51,7 @@ class Fruits extends React.Component {
Fruits:
{ /* change code below this line */ }
- { /* change code above this line */ }
+ { /* change code above this line */ }
+ { /* change code below this line */ }
+
+ { /* change code above this line */ }
+
+
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-complex-jsx-element.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-complex-jsx-element.russian.md
index 152049989d..26069af12a 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-complex-jsx-element.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-complex-jsx-element.russian.md
@@ -3,31 +3,35 @@ id: 5a24bbe0dba28a8d3cbd4c5d
title: Create a Complex JSX Element
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301382
localeTitle: Создание сложного элемента JSX
---
## Description
- Последняя задача была простым примером JSX, но JSX также может представлять собой более сложный HTML. Одна важная вещь, которую нужно знать о вложенном JSX, состоит в том, что она должна возвращать один элемент. Этот один родительский элемент будет обертывать все остальные уровни вложенных элементов. Например, несколько элементов JSX, написанных как братья и сестры без родительского элемента оболочки, не будут препровождаться. Вот пример: Действительный JSX:
<DIV> <p> Пункт 1 </ p> <p> Пункт второй </ p> <p> Пункт третий </ p> </ DIV>
Недопустимый JSX:
<p> Пункт 1 </ p> <p> Пункт второй </ p> <p> Пункт третий </ p>
+
+Последняя задача была простым примером JSX, но JSX также может представлять собой более сложный HTML. Одна важная вещь, которую нужно знать о вложенном JSX, состоит в том, что она должна возвращать один элемент. Этот один родительский элемент будет обертывать все остальные уровни вложенных элементов. Например, несколько элементов JSX, написанных как братья и сестры без родительского элемента оболочки, не будут препровождаться. Вот пример: Действительный JSX:
<DIV> <p> Пункт 1 </ p> <p> Пункт второй </ p> <p> Пункт третий </ p> </ DIV>
Недопустимый JSX:
<p> Пункт 1 </ p> <p> Пункт второй </ p> <p> Пункт третий </ p>
+
## Instructions
- Определите новую константу JSX которая отображает div который содержит следующие элементы в порядке: список h1 , p и неупорядоченный список, содержащий три элемента li . Вы можете включать любой текст, который вы хотите в каждом элементе. Примечание. При рендеринге нескольких элементов, подобных этому, их можно скопировать в круглые скобки, но это не требуется строго. Также обратите внимание, что эта проблема использует тег div для обертывания всех дочерних элементов в одном родительском элементе. Если вы удалите div , JSX больше не будет переполняться. Помните об этом, так как он будет применяться и при возврате элементов JSX в компонентах React.
+
+Определите новую константу JSX которая отображает div который содержит следующие элементы в порядке: список h1 , p и неупорядоченный список, содержащий три элемента li . Вы можете включать любой текст, который вы хотите в каждом элементе. Примечание. При рендеринге нескольких элементов, подобных этому, их можно скопировать в круглые скобки, но это не требуется строго. Также обратите внимание, что эта проблема использует тег div для обертывания всех дочерних элементов в одном родительском элементе. Если вы удалите div , JSX больше не будет переполняться. Помните об этом, так как он будет применяться и при возврате элементов JSX в компонентах React.
+
## Tests
```yml
tests:
- - text: Постоянный JSX должен возвращать элемент div .
- testString: 'assert(JSX.type === "div", "The constant JSX should return a div element.");'
- - text: В div должен быть тег p как второй элемент.
- testString: 'assert(JSX.props.children[1].type === "p", "The div should contain a p tag as the second element.");'
- - text: div должен содержать знак ul в качестве третьего элемента.
- testString: 'assert(JSX.props.children[2].type === "ul", "The div should contain a ul tag as the third element.");'
- - text: div должен содержать тег h1 как первый элемент.
- testString: 'assert(JSX.props.children[0].type === "h1", "The div should contain an h1 tag as the first element.");'
- - text: ul должна содержать три элемента li .
- testString: 'assert(JSX.props.children[2].props.children.length === 3, "The ul should contain three li elements.");'
+ - text: The constant JSX should return a div element.
+ testString: assert(JSX.type === 'div');
+ - text: The div should contain an h1 tag as the first element.
+ testString: assert(JSX.props.children[0].type === 'h1');
+ - text: The div should contain a p tag as the second element.
+ testString: assert(JSX.props.children[1].type === 'p');
+ - text: The div should contain a ul tag as the third element.
+ testString: assert(JSX.props.children[2].type === 'ul');
+ - text: The ul should contain three li elements.
+ testString: assert(JSX.props.children.filter(ele => ele.type === 'ul')[0].props.children.filter(ele => ele.type === 'li').length === 3);
```
@@ -45,12 +49,12 @@ tests:
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+
```
);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-component-with-composition.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-component-with-composition.russian.md
index 6287189d38..5ee7bf1dd2 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-component-with-composition.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-component-with-composition.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036164
title: Create a Component with Composition
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301383
localeTitle: Создание компонента с композицией
---
## Description
- Теперь мы рассмотрим, как мы можем собрать несколько компонентов React вместе. Представьте, что вы создаете приложение и создали три компонента: Navbar , Dashboard и Footer . Чтобы собрать эти компоненты вместе, вы можете создать родительский компонент App который отображает каждый из этих трех компонентов в качестве дочерних . Чтобы отобразить компонент как дочерний элемент в компоненте React, вы включаете имя компонента, написанное как пользовательский тег HTML в JSX. Например, в методе render вы можете написать:
Когда React встречает пользовательский тег HTML, который ссылается на другой компонент (имя компонента, заключенное в < /> как в этом примере), он отображает разметку для этого компонента в местоположении тега. Это должно иллюстрировать отношения между родителями и дочерними элементами между компонентом App и Navbar , Dashboard и Footer .
+
+Теперь мы рассмотрим, как мы можем собрать несколько компонентов React вместе. Представьте, что вы создаете приложение и создали три компонента: Navbar , Dashboard и Footer . Чтобы собрать эти компоненты вместе, вы можете создать родительский компонент App который отображает каждый из этих трех компонентов в качестве дочерних . Чтобы отобразить компонент как дочерний элемент в компоненте React, вы включаете имя компонента, написанное как пользовательский тег HTML в JSX. Например, в методе render вы можете написать:
Когда React встречает пользовательский тег HTML, который ссылается на другой компонент (имя компонента, заключенное в < /> как в этом примере), он отображает разметку для этого компонента в местоположении тега. Это должно иллюстрировать отношения между родителями и дочерними элементами между компонентом App и Navbar , Dashboard и Footer .
+
## Instructions
- В редакторе кода есть простой функциональный компонент ChildComponent и компонент React, называемый ParentComponent . Составьте два вместе рендерингом ChildComponent в ParentComponent . Убедитесь, что тег ChildComponent косой чертой. Примечание.ChildComponent определяется с помощью функции стрелок ES6, потому что это очень распространенная практика при использовании React. Однако, знайте, что это всего лишь функция. Если вы не знакомы с синтаксисом функции стрелки, обратитесь к разделу JavaScript.
+
+В редакторе кода есть простой функциональный компонент ChildComponent и компонент React, называемый ParentComponent . Составьте два вместе рендерингом ChildComponent в ParentComponent . Убедитесь, что тег ChildComponent косой чертой. Примечание.ChildComponent определяется с помощью функции стрелок ES6, потому что это очень распространенная практика при использовании React. Однако, знайте, что это всего лишь функция. Если вы не знакомы с синтаксисом функции стрелки, обратитесь к разделу JavaScript.
+
## Tests
```yml
tests:
- - text: Компонент React должен возвращать один элемент div .
- testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === "div"; })(), "The React component should return a single div element.");'
- - text: Компонент должен возвращать два вложенных элемента.
- testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })(), "The component should return two nested elements.");'
- - text: Компонент должен вернуть ChildComponent в качестве второго ребенка.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find("ParentComponent").find("ChildComponent").length === 1; })(), "The component should return the ChildComponent as its second child.");'
+ - text: The React component should return a single div element.
+ testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === 'div'; })());
+ - text: The component should return two nested elements.
+ testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })());
+ - text: The component should return the ChildComponent as its second child.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find('ParentComponent').find('ChildComponent').length === 1; })());
```
@@ -64,12 +68,12 @@ class ParentComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ { /* change code below this line */ }
+
+ { /* change code above this line */ }
+
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-controlled-form.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-controlled-form.russian.md
index 860db46819..1b791d9b45 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-controlled-form.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-controlled-form.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d4036179
title: Create a Controlled Form
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301384
localeTitle: Создание управляемой формы
---
## Description
- Последняя задача показала, что React может управлять внутренним состоянием для определенных элементов, таких как input и textarea , что делает их контролируемыми компонентами. Это относится и к другим элементам формы, включая обычный элемент form HTML.
+
+Последняя задача показала, что React может управлять внутренним состоянием для определенных элементов, таких как input и textarea , что делает их контролируемыми компонентами. Это относится и к другим элементам формы, включая обычный элемент form HTML.
+
## Instructions
- Компонент MyForm настроен с пустой form с обработчиком отправки. Обработчик отправки будет вызываться при отправке формы. Мы добавили кнопку, которая представляет форму. Вы можете видеть, что у него есть type установленный для submit указывающий, что это кнопка, управляющая формой. Добавьте элемент input в form и установите его value и onChange() как последний вызов. Затем вы должны завершить handleSubmit метод так , чтобы он устанавливает компонент государственной собственности submit к текущему значению входного в локальном state . Примечание. Вы также должны вызвать event.preventDefault() в обработчике отправки, чтобы предотвратить поведение отправки формы по умолчанию, которое обновит веб-страницу. И, наконец, создать h1 тег после form , который придающая submit значение из компонента state . Затем вы можете ввести форму и нажать кнопку (или нажать «Ввод»), и вы увидите, что ваш вход отображается на странице.
+
+Компонент MyForm настроен с пустой form с обработчиком отправки. Обработчик отправки будет вызываться при отправке формы. Мы добавили кнопку, которая представляет форму. Вы можете видеть, что у него есть type установленный для submit указывающий, что это кнопка, управляющая формой. Добавьте элемент input в form и установите его value и onChange() как последний вызов. Затем вы должны завершить handleSubmit метод так , чтобы он устанавливает компонент государственной собственности submit к текущему значению входного в локальном state . Примечание. Вы также должны вызвать event.preventDefault() в обработчике отправки, чтобы предотвратить поведение отправки формы по умолчанию, которое обновит веб-страницу. И, наконец, создать h1 тег после form , который придающая submit значение из компонента state . Затем вы можете ввести форму и нажать кнопку (или нажать «Ввод»), и вы увидите, что ваш вход отображается на странице.
+
## Tests
```yml
tests:
- - text: MyForm должен возвращать элемент div который содержит form и тег h1 . Форма должна содержать input и button .
- testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find("div").children().find("form").length === 1 && mockedComponent.find("div").children().find("h1").length === 1 && mockedComponent.find("form").children().find("input").length === 1 && mockedComponent.find("form").children().find("button").length === 1) })(), "MyForm should return a div element which contains a form and an h1 tag. The form should include an input and a button.");'
- - text: 'Состояние MyForm должно инициализироваться с input свойств input и submit , оба устанавливаются в пустые строки.'
- testString: 'assert(Enzyme.mount(React.createElement(MyForm)).state("input") === "" && Enzyme.mount(React.createElement(MyForm)).state("submit") === "", "The state of MyForm should initialize with input and submit properties, both set to empty strings.");'
- - text: Ввод input элемент input должен обновить свойство input состояния компонента.
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: "" }); return waitForIt(() => mockedComponent.state("input"))}; const _2 = () => { mockedComponent.find("input").simulate("change", { target: { value: "TestInput" }}); return waitForIt(() => ({ state: mockedComponent.state("input"), inputVal: mockedComponent.find("input").props().value }))}; const before = await _1(); const after = await _2(); assert(before === "" && after.state === "TestInput" && after.inputVal === "TestInput", "Typing in the input element should update the input property of the component's state."); }; '
- - text: 'Отправка формы должна запускать handleSubmit который должен установить свойство submit в состоянии, равном текущему вводу.'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: "" }); mockedComponent.setState({submit: ""}); mockedComponent.find("input").simulate("change", {target: {value: "SubmitInput"}}); return waitForIt(() => mockedComponent.state("submit"))}; const _2 = () => { mockedComponent.find("form").simulate("submit"); return waitForIt(() => mockedComponent.state("submit"))}; const before = await _1(); const after = await _2(); assert(before === "" && after === "SubmitInput", "Submitting the form should run handleSubmit which should set the submit property in state equal to the current input."); };'
- - text: Заголовок h1 должен отображать значение поля submit из состояния компонента.
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: "" }); mockedComponent.setState({submit: ""}); mockedComponent.find("input").simulate("change", {target: {value: "TestInput"}}); return waitForIt(() => mockedComponent.find("h1").text())}; const _2 = () => { mockedComponent.find("form").simulate("submit"); return waitForIt(() => mockedComponent.find("h1").text())}; const before = await _1(); const after = await _2(); assert(before === "" && after === "TestInput", "The h1 header should render the value of the submit field from the component's state."); }; '
+ - text: MyForm should return a div element which contains a form and an h1 tag. The form should include an input and a button.
+ testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find('div').children().find('form').length === 1 && mockedComponent.find('div').children().find('h1').length === 1 && mockedComponent.find('form').children().find('input').length === 1 && mockedComponent.find('form').children().find('button').length === 1) })());
+ - text: The state of MyForm should initialize with input and submit properties, both set to empty strings.
+ testString: assert(Enzyme.mount(React.createElement(MyForm)).state('input') === '' && Enzyme.mount(React.createElement(MyForm)).state('submit') === '');
+ - text: Typing in the input element should update the input property of the component's state.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.inputVal === ''TestInput''); }; '
+ - text: Submitting the form should run handleSubmit which should set the submit property in state equal to the current input.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''SubmitInput''}}); return waitForIt(() => mockedComponent.state(''submit''))}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.state(''submit''))}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''SubmitInput''); };'
+ - text: The h1 header should render the value of the submit field from the component's state.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.find(''h1'').text())}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.find(''h1'').text())}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''TestInput''); }; '
```
@@ -43,8 +47,8 @@ class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
- input: ",
- submit: "
+ input: '',
+ submit: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
@@ -80,12 +84,12 @@ class MyForm extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-controlled-input.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-controlled-input.russian.md
index 7cacd4d4d5..c4f7712554 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-controlled-input.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-controlled-input.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036178
title: Create a Controlled Input
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301385
localeTitle: Создание управляемого входа
---
## Description
- У вашего приложения может быть более сложное взаимодействие между state и отображаемым пользовательским интерфейсом. Например, элементы управления формой для ввода текста, такие как input и текстовые textarea , сохраняют свое собственное состояние в DOM по типу пользователя. С React, вы можете переместить это изменяемое состояние в React компонента state . Ввод пользователя становится частью приложения state , так что React контролирует значение этого поля ввода. Как правило, если у вас есть компоненты React с полями ввода, которые пользователь может ввести, это будет управляемая форма ввода.
+
+У вашего приложения может быть более сложное взаимодействие между state и отображаемым пользовательским интерфейсом. Например, элементы управления формой для ввода текста, такие как input и текстовые textarea , сохраняют свое собственное состояние в DOM по типу пользователя. С React, вы можете переместить это изменяемое состояние в React компонента state . Ввод пользователя становится частью приложения state , так что React контролирует значение этого поля ввода. Как правило, если у вас есть компоненты React с полями ввода, которые пользователь может ввести, это будет управляемая форма ввода.
+
## Instructions
- Редактор кода имеет скелет компонента, называемого ControlledInput для создания управляемого элемента input . Компонента state уже инициализирован с input свойством , который содержит пустую строку. Это значение представляет собой текст, который пользователь вводит в поле input . Сначала создайте метод handleChange() который имеет параметр, называемый event . Когда метод вызывается, он получает объект event который содержит строку текста из input элемента. Вы можете получить доступ к этой строке с помощью event.target.value внутри метода. Обновление input свойства компоненты state с новой строкой. В методе рендеринга создайте элемент input над тегом h4 . Добавьте value атрибута , которое равно input свойству компонента state . Затем добавьте обработчик события onChange() заданный для handleChange() . Когда вы вводите поле ввода, этот текст обрабатывается методом handleChange() , устанавливается как свойство input в локальном state и отображается как значение в поле input на странице. Компонент state является единственным источником истины относительно входных данных. И последнее, но не менее важное: не забудьте добавить необходимые привязки в конструктор.
+
+Редактор кода имеет скелет компонента, называемого ControlledInput для создания управляемого элемента input . Компонента state уже инициализирован с input свойством , который содержит пустую строку. Это значение представляет собой текст, который пользователь вводит в поле input . Сначала создайте метод handleChange() который имеет параметр, называемый event . Когда метод вызывается, он получает объект event который содержит строку текста из input элемента. Вы можете получить доступ к этой строке с помощью event.target.value внутри метода. Обновление input свойства компоненты state с новой строкой. В методе рендеринга создайте элемент input над тегом h4 . Добавьте value атрибута , которое равно input свойству компонента state . Затем добавьте обработчик события onChange() заданный для handleChange() . Когда вы вводите поле ввода, этот текст обрабатывается методом handleChange() , устанавливается как свойство input в локальном state и отображается как значение в поле input на странице. Компонент state является единственным источником истины относительно входных данных. И последнее, но не менее важное: не забудьте добавить необходимые привязки в конструктор.
+
## Tests
```yml
tests:
- - text: ControlledInput должен возвращать элемент div который содержит input и тег p .
- testString: 'assert(Enzyme.mount(React.createElement(ControlledInput)).find("div").children().find("input").length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find("div").children().find("p").length === 1, "ControlledInput should return a div element which contains an input and a p tag.");'
- - text: Состояние ControlledInput должно инициализироваться с использованием свойства input заданного пустой строкой.
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state("input"), "", "The state of ControlledInput should initialize with an input property set to an empty string.");'
- - text: 'Ввод ввода во входном элементе должен обновлять состояние и значение ввода, а элемент p должен отображать это состояние по мере ввода.'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: "" }); return waitForIt(() => mockedComponent.state("input"))}; const _2 = () => { mockedComponent.find("input").simulate("change", { target: { value: "TestInput" }}); return waitForIt(() => ({ state: mockedComponent.state("input"), text: mockedComponent.find("p").text(), inputVal: mockedComponent.find("input").props().value }))}; const before = await _1(); const after = await _2(); assert(before === "" && after.state === "TestInput" && after.text === "TestInput" && after.inputVal === "TestInput", "Typing in the input element should update the state and the value of the input, and the p element should render this state as you type."); }; '
+ - text: ControlledInput should return a div element which contains an input and a p tag.
+ testString: assert(Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('input').length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('p').length === 1);
+ - text: The state of ControlledInput should initialize with an input property set to an empty string.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state('input'), '');
+ - text: Typing in the input element should update the state and the value of the input, and the p element should render this state as you type.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), text: mockedComponent.find(''p'').text(), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.text === ''TestInput'' && after.inputVal === ''TestInput''); }; '
```
@@ -39,7 +43,7 @@ class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
- input: "
+ input: ''
};
// change code below this line
@@ -65,12 +69,12 @@ class ControlledInput extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
Это создает класс ES6 Kitten , который расширяет React.Component класс. Таким образом, класс Kitten теперь имеет доступ ко многим полезным функциям React, таким как локальные состояния и привязки к жизненному циклу. Не беспокойтесь, если вы еще не знакомы с этими условиями, они будут рассмотрены более подробно в последующих задачах. Также обратите внимание, что класс Kitten имеет constructor определенный внутри него, который вызывает super() . Он использует super() для вызова конструктора родительского класса, в данном случае React.Component . Конструктор - это специальный метод, используемый при инициализации объектов, созданных с ключевым словом class . Это лучшая практика для индивидуального вызова компонента constructor с super , и передать props для обоих. Это гарантирует правильность инициализации компонента. Пока что знайте, что это стандарт для включения этого кода. Вскоре вы увидите другие варианты использования конструктора, а также props .
+
+Другой способ определить компонент React - это синтаксис class ES6. В следующем примере Kitten расширяет React.Component :
Это создает класс ES6 Kitten , который расширяет React.Component класс. Таким образом, класс Kitten теперь имеет доступ ко многим полезным функциям React, таким как локальные состояния и привязки к жизненному циклу. Не беспокойтесь, если вы еще не знакомы с этими условиями, они будут рассмотрены более подробно в последующих задачах. Также обратите внимание, что класс Kitten имеет constructor определенный внутри него, который вызывает super() . Он использует super() для вызова конструктора родительского класса, в данном случае React.Component . Конструктор - это специальный метод, используемый при инициализации объектов, созданных с ключевым словом class . Это лучшая практика для индивидуального вызова компонента constructor с super , и передать props для обоих. Это гарантирует правильность инициализации компонента. Пока что знайте, что это стандарт для включения этого кода. Вскоре вы увидите другие варианты использования конструктора, а также props .
+
## Instructions
-MyComponent определен в редакторе кода с использованием синтаксиса класса. Завершите запись метода render чтобы он возвращал элемент div , содержащий h1 с текстом Hello React! ,
+
+MyComponent определен в редакторе кода с использованием синтаксиса класса. Завершите запись метода render чтобы он возвращал элемент div , содержащий h1 с текстом Hello React! ,
+
## Tests
```yml
tests:
- - text: Компонент React должен возвращать элемент div .
- testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).type() === "div", "The React component should return a div element.");'
- - text: div должен отображать в нем заголовок h1 .
- testString: 'assert(/
.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), "The returned div should render an h1 header within it.");'
- - text: 'Заголовок h1 должен содержать строку Hello React! ,'
- testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).html() === "
Hello React!
", "The h1 header should contain the string Hello React!.");'
+ - text: The React component should return a div element.
+ testString: assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
+ - text: The returned div should render an h1 header within it.
+ testString: assert(/
.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()));
+ - text: The h1 header should contain the string Hello React!.
+ testString: assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '
+ );
+ // change code above this line
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-simple-jsx-element.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-simple-jsx-element.russian.md
index 9e656d100e..4ee3e66017 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-simple-jsx-element.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-simple-jsx-element.russian.md
@@ -3,25 +3,29 @@ id: 587d7dbc367417b2b2512bb1
title: Create a Simple JSX Element
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301390
localeTitle: Создание простого элемента JSX
---
## Description
-Intro: React - это библиотека представлений с открытым исходным кодом, созданная и поддерживаемая Facebook. Это отличный инструмент для создания пользовательского интерфейса (UI) современных веб-приложений. React использует синтаксическое расширение JavaScript под названием JSX, которое позволяет вам писать HTML непосредственно в JavaScript. Это имеет несколько преимуществ. Он позволяет использовать полную программную мощность JavaScript в HTML и помогает сохранить читаемость кода. По большей части JSX похож на HTML, который вы уже узнали, однако есть несколько ключевых различий, которые будут рассмотрены в ходе этих задач. Например, поскольку JSX является синтаксическим расширением JavaScript, вы можете писать JavaScript непосредственно в JSX. Для этого вы просто включаете код, который хотите обрабатывать как JavaScript в фигурных скобках: { 'this is treated as JavaScript code' } . Помните об этом, поскольку он используется в нескольких будущих задачах. Однако, поскольку JSX недействителен JavaScript, код JSX должен быть скомпилирован в JavaScript. Транспилер Babel - популярный инструмент для этого процесса. Для вашего удобства это уже добавлено за кулисами для этих задач. Если вам удастся написать синтаксически недействительный JSX, вы увидите, что первый тест в этих задачах терпит неудачу. Стоит отметить, что под капотом возникают вызовы ReactDOM.render(JSX, document.getElementById('root')) . Этот вызов функции - это то, что помещает ваш JSX в собственное легкое представление DOM DOM. Затем React использует моментальные снимки своей собственной DOM для оптимизации обновления только определенных частей фактического DOM.
+
+Intro: React - это библиотека представлений с открытым исходным кодом, созданная и поддерживаемая Facebook. Это отличный инструмент для создания пользовательского интерфейса (UI) современных веб-приложений. React использует синтаксическое расширение JavaScript под названием JSX, которое позволяет вам писать HTML непосредственно в JavaScript. Это имеет несколько преимуществ. Он позволяет использовать полную программную мощность JavaScript в HTML и помогает сохранить читаемость кода. По большей части JSX похож на HTML, который вы уже узнали, однако есть несколько ключевых различий, которые будут рассмотрены в ходе этих задач. Например, поскольку JSX является синтаксическим расширением JavaScript, вы можете писать JavaScript непосредственно в JSX. Для этого вы просто включаете код, который хотите обрабатывать как JavaScript в фигурных скобках: { 'this is treated as JavaScript code' } . Помните об этом, поскольку он используется в нескольких будущих задачах. Однако, поскольку JSX недействителен JavaScript, код JSX должен быть скомпилирован в JavaScript. Транспилер Babel - популярный инструмент для этого процесса. Для вашего удобства это уже добавлено за кулисами для этих задач. Если вам удастся написать синтаксически недействительный JSX, вы увидите, что первый тест в этих задачах терпит неудачу. Стоит отметить, что под капотом возникают вызовы ReactDOM.render(JSX, document.getElementById('root')) . Этот вызов функции - это то, что помещает ваш JSX в собственное легкое представление DOM DOM. Затем React использует моментальные снимки своей собственной DOM для оптимизации обновления только определенных частей фактического DOM.
+
## Instructions
-Инструкции: текущий код использует JSX для назначения элемента div постоянному JSX . Замените div элементом h1 и добавьте текст Hello JSX! внутри него.
+
+Инструкции: текущий код использует JSX для назначения элемента div постоянному JSX . Замените div элементом h1 и добавьте текст Hello JSX! внутри него.
+
## Tests
```yml
tests:
- - text: Постоянный JSX должен возвращать элемент h1 .
- testString: 'assert(JSX.type === "h1", "The constant JSX should return an h1 element.");'
- - text: Тег h1 должен содержать текст Hello JSX!
- testString: 'assert(Enzyme.shallow(JSX).contains("Hello JSX!"), "The h1 tag should include the text Hello JSX!");'
+ - text: The constant JSX should return an h1 element.
+ testString: assert(JSX.type === 'h1');
+ - text: The h1 tag should include the text Hello JSX!
+ testString: assert(Enzyme.shallow(JSX).contains('Hello JSX!'));
```
@@ -39,12 +43,12 @@ const JSX = ;
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+
```
;
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-stateful-component.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-stateful-component.russian.md
index 01f768230c..3ce296bcf2 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-stateful-component.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-stateful-component.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036170
title: Create a Stateful Component
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301391
localeTitle: Создание компонента состояния
---
## Description
- Одна из наиболее важных тем в Реактировании - это state . Состояние состоит из любых данных, о которых должно знать ваше приложение, которые могут со временем меняться. Вы хотите, чтобы ваши приложения отвечали на изменения состояния и при необходимости обновляли интерфейс. React предлагает хорошее решение для государственного управления современными веб-приложениями. Вы создаете состояние в компоненте React, объявляя свойство state в классе компонента в своем constructor . Это инициализирует компонент с state при его создании. Свойство state должно быть установлено на object JavaScript. Объявление выглядит следующим образом:
this.state = { // описываем ваше состояние здесь } У вас есть доступ к объекту state протяжении всего срока службы вашего компонента. Вы можете обновить его, отобразить в пользовательском интерфейсе и передать его в качестве реквизита для дочерних компонентов. Объект state может быть как сложным, так и простым, как вам нужно. Обратите внимание , что вы должны создать компонент класса за счет расширения React.Component для того , чтобы создать state , как это.
+
+Одна из наиболее важных тем в Реактировании - это state . Состояние состоит из любых данных, о которых должно знать ваше приложение, которые могут со временем меняться. Вы хотите, чтобы ваши приложения отвечали на изменения состояния и при необходимости обновляли интерфейс. React предлагает хорошее решение для государственного управления современными веб-приложениями. Вы создаете состояние в компоненте React, объявляя свойство state в классе компонента в своем constructor . Это инициализирует компонент с state при его создании. Свойство state должно быть установлено на object JavaScript. Объявление выглядит следующим образом:
this.state = { // описываем ваше состояние здесь } У вас есть доступ к объекту state протяжении всего срока службы вашего компонента. Вы можете обновить его, отобразить в пользовательском интерфейсе и передать его в качестве реквизита для дочерних компонентов. Объект state может быть как сложным, так и простым, как вам нужно. Обратите внимание , что вы должны создать компонент класса за счет расширения React.Component для того , чтобы создать state , как это.
+
## Instructions
- В редакторе кода есть компонент, который пытается отобразить свойство name из своего state . Однако не определено state . Инициализируйте компонент с state в constructor и присвойте свое имя свойству name .
+
+В редакторе кода есть компонент, который пытается отобразить свойство name из своего state . Однако не определено state . Инициализируйте компонент с state в constructor и присвойте свое имя свойству name .
+
## Tests
```yml
tests:
- - text: StatefulComponent должен существовать и визуализироваться.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("StatefulComponent").length === 1; })(), "StatefulComponent should exist and render.");'
- - text: StatefulComponent должен отображать элемент div и h1 .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1; })(), "StatefulComponent should render a div and an h1 element.");'
- - text: 'Состояние StatefulComponent должно быть инициализировано с name свойства, заданным для строки.'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && typeof initialState.name === "string"); })(), "The state of StatefulComponent should be initialized with a property name set to a string.");'
- - text: Свойство name в состоянии StatefulComponent должны оказывать в h1 элемента.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find("h1").text() === initialState.name; })(), "The property name in the state of StatefulComponent should render in the h1 element.");'
+ - text: StatefulComponent should exist and render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })());
+ - text: StatefulComponent should render a div and an h1 element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1; })());
+ - text: The state of StatefulComponent should be initialized with a property name set to a string.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && typeof initialState.name === 'string'); })());
+ - text: The property name in the state of StatefulComponent should render in the h1 element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })());
```
@@ -56,12 +60,12 @@ class StatefulComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-stateless-functional-component.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-stateless-functional-component.russian.md
index 81ed1cdf7d..6996a6826f 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/create-a-stateless-functional-component.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/create-a-stateless-functional-component.russian.md
@@ -3,29 +3,34 @@ id: 5a24c314108439a4d4036162
title: Create a Stateless Functional Component
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301392
localeTitle: Создание функционального компонента без учета состояния
---
## Description
+
Компоненты - это ядро React. Всё в React является компонентом, и здесь вы научитесь, как их создавать.
-Существуют два способа создания React компонентов. Первый способ - это использовать JavaScript функцию. Определяя компонент таким образом, вы создаете *функциональный компонент без учета состояния*. Концепт состояния в приложении будет рассмотрен в дальнейших главах. Сейчас думайте о компоненте без учета состояния, как о компоненте, которая может получать данные и рендерить их, но не управляет или следить за изменениями в данных.
+Существуют два способа создания React компонентов. Первый способ - это использовать JavaScript функцию. Определяя компонент таким образом, вы создаете _функциональный компонент без учета состояния_. Концепт состояния в приложении будет рассмотрен в дальнейших главах. Сейчас думайте о компоненте без учета состояния, как о компоненте, которая может получать данные и рендерить их, но не управляет или следить за изменениями в данных.
+
## Instructions
-undefined
+
+The code editor has a function called MyComponent. Complete this function so it returns a single div element which contains some string of text.
+Note: The text is considered a child of the div element, so you will not be able to use a self-closing tag.
+
## Tests
```yml
tests:
- - text: 'MyComponent должен возвращать JSX.'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), "MyComponent should return JSX.");'
- - text: 'MyComponent должен вернуть элемент div.'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === "div" })(), "MyComponent should return a div element.");'
- - text: 'Элемент div должен содержать строку текста.'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").text() !== ""; })(), "The div element should contain a string of text.");'
+ - text: MyComponent should return JSX.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })());
+ - text: MyComponent should return a div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })());
+ - text: The div element should contain a string of text.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })());
```
@@ -49,12 +54,12 @@ const MyComponent = function() {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
@@ -64,7 +69,16 @@ console.info('after the test');
## Solution
-```js
-// solution required
+```jsx
+const MyComponent = function() {
+ // change code below this line
+ return (
+
+ Demo Solution
+
+ );
+ // change code above this line
+}
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/define-an-html-class-in-jsx.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/define-an-html-class-in-jsx.russian.md
index 73ef88cd0b..d0f2782dcc 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/define-an-html-class-in-jsx.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/define-an-html-class-in-jsx.russian.md
@@ -3,25 +3,29 @@ id: 5a24c314108439a4d4036160
title: Define an HTML Class in JSX
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301393
localeTitle: Определить класс HTML в JSX
---
## Description
- Теперь, когда вам удобнее писать JSX, вам может быть интересно, как он отличается от HTML. До сих пор может показаться, что HTML и JSX точно такие же. Одно из ключевых различий в JSX заключается в том, что вы больше не можете использовать class слов для определения классов HTML. Это потому, что class является зарезервированным словом в JavaScript. Вместо этого JSX использует className . Фактически, соглашение об именах для всех атрибутов HTML и ссылок на события в JSX становится camelCase. Например, событие click в JSX - onClick , а не onclick . Аналогично, onchange становится onChange . Хотя это тонкая разница, важно помнить о продвижении вперед.
+
+Теперь, когда вам удобнее писать JSX, вам может быть интересно, как он отличается от HTML. До сих пор может показаться, что HTML и JSX точно такие же. Одно из ключевых различий в JSX заключается в том, что вы больше не можете использовать class слов для определения классов HTML. Это потому, что class является зарезервированным словом в JavaScript. Вместо этого JSX использует className . Фактически, соглашение об именах для всех атрибутов HTML и ссылок на события в JSX становится camelCase. Например, событие click в JSX - onClick , а не onclick . Аналогично, onchange становится onChange . Хотя это тонкая разница, важно помнить о продвижении вперед.
+
## Instructions
- Примените класс myDiv к div предоставленному в коде JSX.
+
+Примените класс myDiv к div предоставленному в коде JSX.
+
## Tests
```yml
tests:
- - text: Постоянный JSX должен возвращать элемент div .
- testString: 'assert.strictEqual(JSX.type, "div", "The constant JSX should return a div element.");'
- - text: У div есть класс myDiv .
- testString: 'assert.strictEqual(JSX.props.className, "myDiv", "The div has a class of myDiv.");'
+ - text: The constant JSX should return a div element.
+ testString: assert.strictEqual(JSX.type, 'div');
+ - text: The div has a class of myDiv.
+ testString: assert.strictEqual(JSX.props.className, 'myDiv');
```
@@ -43,12 +47,12 @@ const JSX = (
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+
```
);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.russian.md
index 3f7e94ba3b..a8a202a1a0 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.russian.md
@@ -3,31 +3,38 @@ id: 5a24c314108439a4d403618b
title: Give Sibling Elements a Unique Key Attribute
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301394
localeTitle: Дайте сиблинг-элементам уникальный атрибут ключа
---
## Description
+
Последняя задача показала, как используется метод `map` для динамичного рендеринга нескольких элементов, основываясь на вводе пользователя. Однако в том примере отсутсвовала важная часть. Когда вы создаете массив, атрибут `key` каждого из элементов должен иметь уникальное значение. React использует эти ключи для того, чтобы отслеживать какие элементы были добавлены, изменены или удалены. Это помогает сделать процесс повторного рендеринга более эффективным, когда мы изменяем список. Обратите внимание, что ключи должны быть уникальными только среди сиблинг-элементов, они не обязаны быть глобально уникальными в вашем приложении.
+
## Instructions
-undefined
+
+The code editor has an array with some front end frameworks and a stateless functional component named Frameworks(). Frameworks() needs to map the array to an unordered list, much like in the last challenge. Finish writing the map callback to return an li element for each framework in the frontEndFrameworks array. This time, make sure to give each li a key attribute, set to a unique value. The li elements should also contain text from frontEndFrameworks.
+Normally, you want to make the key something that uniquely identifies the element being rendered. As a last resort the array index may be used, but typically you should try to use a unique identification.
+
## Tests
```yml
tests:
- - text: 'Компонент Frameworks должен присутсовать и отображаться на странице.'
- testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("Frameworks").length === 1, "The Frameworks component should exist and render to the page.");'
- - text: 'Frameworks должен отображать элемент h1.'
- testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("h1").length === 1, "Frameworks should render an h1 element.");'
- - text: Frameworks должны отображать элемент ul .
- testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").length === 1, "Frameworks should render a ul element.");'
- - text: Тег ul должен отображать 6 дочерних элементов li .
- testString: 'assert(Enzyme.mount(React.createElement(Frameworks)).find("ul").children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find("ul").childAt(0).name() === "li" && Enzyme.mount(React.createElement(Frameworks)).find("li").length === 6, "The ul tag should render 6 child li elements.");'
- - text: Каждый элемент элемента списка должен иметь уникальный key атрибут.
- testString: 'assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find("ul"); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), "Each list item element should have a unique key attribute.");'
+ - text: The Frameworks component should exist and render to the page.
+ testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1);
+ - text: Frameworks should render an h1 element.
+ testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1);
+ - text: Frameworks should render a ul element.
+ testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1);
+ - text: The ul tag should render 6 child li elements.
+ testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find('ul').childAt(0).name() === 'li' && Enzyme.mount(React.createElement(Frameworks)).find('li').length === 6);
+ - text: Each list item element should have a unique key attribute.
+ testString: assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find('ul'); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })());
+ - text: Each list item element should contain text from frontEndFrameworks.
+ testString: assert((() => {const li = Enzyme.mount(React.createElement(Frameworks)).find('ul').children(); return [...Array(5)].every((_, i) => frontEndFrameworks.includes(li.at(i).text()))})());
```
@@ -64,12 +71,12 @@ function Frameworks() {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/introducing-inline-styles.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/introducing-inline-styles.russian.md
index c6bc2f0eae..3c4a5f9ff8 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/introducing-inline-styles.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/introducing-inline-styles.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036181
title: Introducing Inline Styles
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301395
localeTitle: Представление встроенных стилей
---
## Description
- Существуют и другие сложные концепции, которые добавляют мощные возможности для вашего кода React. Но вам может быть интересно узнать о более простой проблеме того, как стилизовать те элементы JSX, которые вы создаете в React. Вероятно, вы знаете, что это будет не то же самое, что работать с HTML из-за того, как вы применяете классы к элементам JSX . Если вы импортируете стили из таблицы стилей, это совсем не так. Вы применяете класс к своему элементу JSX, используя атрибут className , и применяете стили к классу в таблице стилей. Другой вариант - применить встроенные стили, которые очень распространены в разработке ReactJS. Вы применяете встроенные стили к элементам JSX, подобным тому, как это делается в HTML, но с несколькими отличиями JSX. Ниже приведен пример встроенного стиля в HTML: <div style="color: yellow; font-size: 16px">Mellow Yellow</div> Элементы JSX используют атрибут style , но из-за того, что JSX переполнен, вы можете 't установить значение в string . Вместо этого вы устанавливаете его равным object JavaScript. Вот пример: <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div> Обратите внимание, как мы camelCase свойство fontSize? Это связано с тем, что React не будет принимать ключи кебаба в объекте стиля. React применит правильное имя свойства для нас в HTML.
+
+Существуют и другие сложные концепции, которые добавляют мощные возможности для вашего кода React. Но вам может быть интересно узнать о более простой проблеме того, как стилизовать те элементы JSX, которые вы создаете в React. Вероятно, вы знаете, что это будет не то же самое, что работать с HTML из-за того, как вы применяете классы к элементам JSX . Если вы импортируете стили из таблицы стилей, это совсем не так. Вы применяете класс к своему элементу JSX, используя атрибут className , и применяете стили к классу в таблице стилей. Другой вариант - применить встроенные стили, которые очень распространены в разработке ReactJS. Вы применяете встроенные стили к элементам JSX, подобным тому, как это делается в HTML, но с несколькими отличиями JSX. Ниже приведен пример встроенного стиля в HTML: <div style="color: yellow; font-size: 16px">Mellow Yellow</div> Элементы JSX используют атрибут style , но из-за того, что JSX переполнен, вы можете 't установить значение в string . Вместо этого вы устанавливаете его равным object JavaScript. Вот пример: <div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div> Обратите внимание, как мы camelCase свойство fontSize? Это связано с тем, что React не будет принимать ключи кебаба в объекте стиля. React применит правильное имя свойства для нас в HTML.
+
## Instructions
- Добавьте атрибут style в div в редакторе кода, чтобы придать тексту цвет красного и размер шрифта 72px. Обратите внимание, что вы можете указать размер шрифта как число, опустив единицы «px» или записать его как «72px».
+
+Добавьте атрибут style в div в редакторе кода, чтобы придать тексту цвет красного и размер шрифта 72px. Обратите внимание, что вы можете указать размер шрифта как число, опустив единицы «px» или записать его как «72px».
+
## Tests
```yml
tests:
- - text: Компонент должен отображать элемент div .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === "div"; })(), "The component should render a div element.");'
- - text: Элемент div должен иметь red .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === "red"; })(), "The div element should have a color of red.");'
- - text: Элемент div должен иметь размер шрифта 72px .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === "72" || mockedComponent.children().props().style.fontSize === "72px"); })(), "The div element should have a font size of 72px.");'
+ - text: The component should render a div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })());
+ - text: The div element should have a color of red.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })());
+ - text: The div element should have a font size of 72px.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === '72' || mockedComponent.children().props().style.fontSize === '72px'); })());
```
@@ -47,12 +51,12 @@ class Colorful extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.russian.md
index 9100b15a9f..1e5b3a5c01 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036161
title: Learn About Self-Closing JSX Tags
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301396
localeTitle: Узнайте о самозакрывающихся тегах JSX
---
## Description
- До сих пор вы видели, как JSX отличается от HTML ключевым способом с использованием класса className против class для определения классов HTML. Другим важным способом, с помощью которого JSX отличается от HTML, является идея самозакрывающегося тега. В HTML почти все теги имеют как открывающий, так и закрывающий тег: <div></div> ; закрывающий тег всегда имеет косую черту перед именем тега, которое вы закрываете. Тем не менее, в HTML есть специальные экземпляры, называемые «самозакрывающиеся теги», или теги, которые не требуют как открывающего, так и закрывающего тега перед тем, как запустить другой тег. Например, тэг разрыва строки может быть записан как <br> или как <br /> , но никогда не должен быть записан как <br></br> , так как он не содержит никакого содержимого. В JSX правила немного отличаются. Любой элемент JSX можно записать с помощью самозакрывающегося тега, и каждый элемент должен быть закрыт. Например, тег разрыва строки всегда должен быть записан как <br /> , чтобы быть действительным JSX, который может быть переписан. А <div> , с другой стороны, может быть записано как <div /> или <div></div> . Разница в том, что в первой версии синтаксиса нет способа включить что-либо в <div /> . В последующих задачах вы увидите, что этот синтаксис полезен при рендеринге компонентов React.
+
+До сих пор вы видели, как JSX отличается от HTML ключевым способом с использованием класса className против class для определения классов HTML. Другим важным способом, с помощью которого JSX отличается от HTML, является идея самозакрывающегося тега. В HTML почти все теги имеют как открывающий, так и закрывающий тег: <div></div> ; закрывающий тег всегда имеет косую черту перед именем тега, которое вы закрываете. Тем не менее, в HTML есть специальные экземпляры, называемые «самозакрывающиеся теги», или теги, которые не требуют как открывающего, так и закрывающего тега перед тем, как запустить другой тег. Например, тэг разрыва строки может быть записан как <br> или как <br /> , но никогда не должен быть записан как <br></br> , так как он не содержит никакого содержимого. В JSX правила немного отличаются. Любой элемент JSX можно записать с помощью самозакрывающегося тега, и каждый элемент должен быть закрыт. Например, тег разрыва строки всегда должен быть записан как <br /> , чтобы быть действительным JSX, который может быть переписан. А <div> , с другой стороны, может быть записано как <div /> или <div></div> . Разница в том, что в первой версии синтаксиса нет способа включить что-либо в <div /> . В последующих задачах вы увидите, что этот синтаксис полезен при рендеринге компонентов React.
+
## Instructions
- Исправьте ошибки в редакторе кода, чтобы он был корректным JSX и успешно переводил. Убедитесь, что вы не меняете какой-либо контент - вам нужно только закрыть теги, где они нужны.
+
+Исправьте ошибки в редакторе кода, чтобы он был корректным JSX и успешно переводил. Убедитесь, что вы не меняете какой-либо контент - вам нужно только закрыть теги, где они нужны.
+
## Tests
```yml
tests:
- - text: Постоянный JSX должен возвращать элемент div .
- testString: 'assert.strictEqual(JSX.type, "div", "The constant JSX should return a div element.");'
- - text: div должен содержать метку br .
- testString: 'assert(Enzyme.shallow(JSX).find("br").length === 1, "The div should contain a br tag.");'
- - text: div должен содержать тег hr .
- testString: 'assert(Enzyme.shallow(JSX).find("hr").length === 1, "The div should contain an hr tag.");'
+ - text: The constant JSX should return a div element.
+ testString: assert.strictEqual(JSX.type, 'div');
+ - text: The div should contain a br tag.
+ testString: assert(Enzyme.shallow(JSX).find('br').length === 1);
+ - text: The div should contain an hr tag.
+ testString: assert(Enzyme.shallow(JSX).find('hr').length === 1);
```
@@ -49,12 +53,12 @@ const JSX = (
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+
```
+);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.russian.md
index 7c5a1e40ec..53548df2c0 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.russian.md
@@ -8,10 +8,14 @@ localeTitle: Управление обновлениями с помощью м
---
## Description
- Другим методом жизненного цикла является componentWillReceiveProps() который вызывается всякий раз, когда компонент получает новые реквизиты. Этот метод получает новый реквизит в качестве аргумента, который обычно записывается как nextProps . Вы можете использовать этот аргумент и сравнить с этим this.props и выполнить действия перед обновлением компонента. Например, вы можете вызвать setState() локально до обработки обновления. Другим методом является componentDidUpdate() и вызывается сразу после повторного рендеринга компонента. Обратите внимание, что рендеринг и установка в жизненном цикле компонентов считаются разными. Когда страница сначала загружается, все компоненты монтируются, и здесь вызывается такие методы, как componentWillMount() и componentDidMount() . После этого, по мере изменения состояния, компоненты переделают себя. Следующая задача охватывает это более подробно.
+
+Другим методом жизненного цикла является componentWillReceiveProps() который вызывается всякий раз, когда компонент получает новые реквизиты. Этот метод получает новый реквизит в качестве аргумента, который обычно записывается как nextProps . Вы можете использовать этот аргумент и сравнить с этим this.props и выполнить действия перед обновлением компонента. Например, вы можете вызвать setState() локально до обработки обновления. Другим методом является componentDidUpdate() и вызывается сразу после повторного рендеринга компонента. Обратите внимание, что рендеринг и установка в жизненном цикле компонентов считаются разными. Когда страница сначала загружается, все компоненты монтируются, и здесь вызывается такие методы, как componentWillMount() и componentDidMount() . После этого, по мере изменения состояния, компоненты переделают себя. Следующая задача охватывает это более подробно.
+
## Instructions
- Детский компонент Dialog получает реквизит message от своего родителя, компонента Controller . Напишите componentWillReceiveProps() в компоненте Dialog и nextProps его в консоли this.props и nextProps . Вам нужно будет передать nextProps в качестве аргумента для этого метода, и хотя можно назвать его чем угодно, назовите его nextProps здесь. Затем добавьте componentDidUpdate() в компонент Dialog и запишите заявление, в котором говорится, что компонент обновлен. Этот метод работает аналогично componentWillUpdate() , который предоставляется вам. Теперь нажмите кнопку, чтобы изменить сообщение и посмотреть консоль браузера. Порядок консольных операторов показывает порядок вызова методов. Примечание. Вам необходимо будет написать методы жизненного цикла в качестве обычных функций, а не как функции стрелок для прохождения тестов (также нет преимуществ при написании методов жизненного цикла в виде функций стрелок).
+
+Детский компонент Dialog получает реквизит message от своего родителя, компонента Controller . Напишите componentWillReceiveProps() в компоненте Dialog и nextProps его в консоли this.props и nextProps . Вам нужно будет передать nextProps в качестве аргумента для этого метода, и хотя можно назвать его чем угодно, назовите его nextProps здесь. Затем добавьте componentDidUpdate() в компонент Dialog и запишите заявление, в котором говорится, что компонент обновлен. Этот метод работает аналогично componentWillUpdate() , который предоставляется вам. Теперь нажмите кнопку, чтобы изменить сообщение и посмотреть консоль браузера. Порядок консольных операторов показывает порядок вызова методов. Примечание. Вам необходимо будет написать методы жизненного цикла в качестве обычных функций, а не как функции стрелок для прохождения тестов (также нет преимуществ при написании методов жизненного цикла в виде функций стрелок).
+
## Tests
@@ -26,7 +30,6 @@ tests:
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,""); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes("console.log") && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), "The componentWillReceiveProps method in the Dialog component should log nextProps to the console.");'
- text: Компонент Dialog должен вызывать метод componentDidUpdate и записывать сообщение на консоль.
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,""); return lifecycleChild.length !== "undefined" && lifecycleChild.includes("console.log"); })(), "The Dialog component should call the componentDidUpdate method and log a message to the console.");'
-
```
@@ -79,12 +82,12 @@ class Controller extends React.Component {
-
-### After Test
+### After Tests
-```js
+```jsx
console.info('after the test');
+
```
@@ -94,7 +97,8 @@ console.info('after the test');
## Solution
-```js
+```jsx
// solution required
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.russian.md
index 5bf23d4967..e401b7489b 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036180
title: Optimize Re-Renders with shouldComponentUpdate
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301398
localeTitle: Оптимизировать повторные рендеринги с shouldComponentUpdate
---
## Description
- Пока, если какой-либо компонент получает новое state или новый props , он повторно отображает себя и всех своих детей. Обычно это нормально. Но React предоставляет метод жизненного цикла, который вы можете вызывать, когда дочерние компоненты получают новое state или props , и заявляют, что конкретно компоненты должны обновляться или нет. Этот метод должен быть shouldComponentUpdate() , и он принимает параметры nextProps и nextState качестве параметров. Этот метод является полезным способом оптимизации производительности. Например, поведение по умолчанию заключается в том, что ваш компонент повторно отображает, когда он получает новые props , даже если props не изменился. Вы можете использовать shouldComponentUpdate() чтобы предотвратить это, сравнив props . Метод должен возвращать boolean значение, которое сообщает React, обновлять или не обновлять компонент. Вы можете сравнить текущие реквизиты ( this.props ) со следующими реквизитами ( nextProps ), чтобы определить, нужно ли вам обновлять или нет, и соответственно вернуть true или false .
+
+Пока, если какой-либо компонент получает новое state или новый props , он повторно отображает себя и всех своих детей. Обычно это нормально. Но React предоставляет метод жизненного цикла, который вы можете вызывать, когда дочерние компоненты получают новое state или props , и заявляют, что конкретно компоненты должны обновляться или нет. Этот метод должен быть shouldComponentUpdate() , и он принимает параметры nextProps и nextState качестве параметров. Этот метод является полезным способом оптимизации производительности. Например, поведение по умолчанию заключается в том, что ваш компонент повторно отображает, когда он получает новые props , даже если props не изменился. Вы можете использовать shouldComponentUpdate() чтобы предотвратить это, сравнив props . Метод должен возвращать boolean значение, которое сообщает React, обновлять или не обновлять компонент. Вы можете сравнить текущие реквизиты ( this.props ) со следующими реквизитами ( nextProps ), чтобы определить, нужно ли вам обновлять или нет, и соответственно вернуть true или false .
+
## Instructions
- Метод shouldComponentUpdate() добавляется в компонент, называемый OnlyEvens . В настоящее время этот метод возвращает true так что OnlyEvens повторно отображает каждый раз, когда он получает новые props . Измените метод так, чтобы OnlyEvens только если value его новых реквизитов равно. Нажмите кнопку « Add и посмотрите порядок событий в консоли вашего браузера, когда запускаются другие крючки жизненного цикла.
+
+Метод shouldComponentUpdate() добавляется в компонент, называемый OnlyEvens . В настоящее время этот метод возвращает true так что OnlyEvens повторно отображает каждый раз, когда он получает новые props . Измените метод так, чтобы OnlyEvens только если value его новых реквизитов равно. Нажмите кнопку « Add и посмотрите порядок событий в консоли вашего браузера, когда запускаются другие крючки жизненного цикла.
+
## Tests
```yml
tests:
- - text: Компонент Controller должен отображать компонент OnlyEvens как дочерний.
- testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find("Controller").length === 1 && mockedComponent.find("OnlyEvens").length === 1; })(), "The Controller component should render the OnlyEvens component as a child.");'
- - text: Метод shouldComponentUpdate должен быть определен в компоненте OnlyEvens .
- testString: 'assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,""); return child !== "undefined"; })(), "The shouldComponentUpdate method should be defined on the OnlyEvens component.");'
- - text: Компонент OnlyEvens должен возвращать тег h1 который отображает значение this.props.value .
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find("h1").html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find("h1").html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === "
1000
" && secondValue === "
10
", "The OnlyEvens component should return an h1 tag which renders the value of this.props.value."); }; '
- - text: OnlyEvens следует повторно отображать только при следующем nextProps.value .
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find("h1").text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === "8" && secondValue === "8" && thirdValue === "42", "OnlyEvens should re-render only when nextProps.value is even."); }; '
+ - text: The Controller component should render the OnlyEvens component as a child.
+ testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('OnlyEvens').length === 1; })());
+ - text: The shouldComponentUpdate method should be defined on the OnlyEvens component.
+ testString: assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,''); return child !== 'undefined'; })());
+ - text: The OnlyEvens component should return an h1 tag which renders the value of this.props.value.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find(''h1'').html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find(''h1'').html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === ''
1000
'' && secondValue === ''
10
''); }; '
+ - text: OnlyEvens should re-render only when nextProps.value is even.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === ''8'' && secondValue === ''8'' && thirdValue === ''42''); }; '
```
@@ -47,9 +51,6 @@ class OnlyEvens extends React.Component {
return true;
// change code above this line
}
- componentWillReceiveProps(nextProps) {
- console.log('Receiving new props...');
- }
componentDidUpdate() {
console.log('Component re-rendered.');
}
@@ -85,12 +86,12 @@ class Controller extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/override-default-props.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/override-default-props.russian.md
index 33f3a94064..98cae5c202 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/override-default-props.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/override-default-props.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d403616c
title: Override Default Props
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301399
localeTitle: Переопределить опоры по умолчанию
---
## Description
- Возможность установки реквизитов по умолчанию является полезной функцией в React. Способ переопределения реквизитов по умолчанию состоит в том, чтобы явно указать значения prop для компонента.
+
+Возможность установки реквизитов по умолчанию является полезной функцией в React. Способ переопределения реквизитов по умолчанию состоит в том, чтобы явно указать значения prop для компонента.
+
## Instructions
-ShoppingCart компонент в настоящее время оказывает нижестоящий компонент Items . Этот Items компонент имеет опору по умолчанию quantity , установленное на целое число 0 . Переопределите опору по умолчанию, передав значение 10 для quantity . Примечание. Помните, что синтаксис добавления опоры к компоненту выглядит так же, как вы добавляете атрибуты HTML. Однако, поскольку значение для quantity является целым числом, оно не будет отображаться в кавычках, но оно должно быть завернуто в фигурные скобки. Например, {100} . Этот синтаксис говорит JSX интерпретировать значение в фигурных скобках непосредственно как JavaScript.
+
+ShoppingCart компонент в настоящее время оказывает нижестоящий компонент Items . Этот Items компонент имеет опору по умолчанию quantity , установленное на целое число 0 . Переопределите опору по умолчанию, передав значение 10 для quantity . Примечание. Помните, что синтаксис добавления опоры к компоненту выглядит так же, как вы добавляете атрибуты HTML. Однако, поскольку значение для quantity является целым числом, оно не будет отображаться в кавычках, но оно должно быть завернуто в фигурные скобки. Например, {100} . Этот синтаксис говорит JSX интерпретировать значение в фигурных скобках непосредственно как JavaScript.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The component ShoppingCart should render.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").length === 1; })(), "The component Items should render.");'
- - text: 'Элемент Items должен иметь оповещение { quantity: 10 } переданное из компонента ShoppingCart .'
- testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").props().quantity == 10 && getUserInput("index").replace(/ /g,"").includes(""); })(), "The Items component should have a prop of { quantity: 10 } passed from the ShoppingCart component.");'
+ - text: The component ShoppingCart should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })());
+ - text: The component Items should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })());
+ - text: 'The Items component should have a prop of { quantity: 10 } passed from the ShoppingCart component.'
+ testString: getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').props().quantity == 10 && getUserInput('index').replace(/ /g,'').includes(''); })());
```
@@ -58,12 +62,12 @@ class ShoppingCart extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
Current Quantity of Items in Cart: {props.quantity}
+}
+
+Items.defaultProps = {
+ quantity: 0
+}
+
+class ShoppingCart extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ { /* change code below this line */ }
+ return
+ { /* change code above this line */ }
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/pass-a-callback-as-props.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/pass-a-callback-as-props.russian.md
index 67b72c049d..cec2accfef 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/pass-a-callback-as-props.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/pass-a-callback-as-props.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d403617b
title: Pass a Callback as Props
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301400
localeTitle: Передача обратного вызова в качестве реквизита
---
## Description
- Вы можете передать state качестве реквизита дочерних компонентов, но вы не ограничены передачей данных. Вы также можете передавать функции обработчика или любой метод, определенный в компоненте React для дочернего компонента. Так вы позволяете дочерним компонентам взаимодействовать со своими родительскими компонентами. Вы передаете методы ребенку точно так же, как обычный пропеллер. Ему назначено имя, и у вас есть доступ к этому имени метода под this.props в дочернем компоненте.
+
+Вы можете передать state качестве реквизита дочерних компонентов, но вы не ограничены передачей данных. Вы также можете передавать функции обработчика или любой метод, определенный в компоненте React для дочернего компонента. Так вы позволяете дочерним компонентам взаимодействовать со своими родительскими компонентами. Вы передаете методы ребенку точно так же, как обычный пропеллер. Ему назначено имя, и у вас есть доступ к этому имени метода под this.props в дочернем компоненте.
+
## Instructions
- В редакторе кода есть три компонента. MyApp компонент является родителем , который будет оказывать GetInput и RenderInput дочерние компоненты. Добавьте GetInput компонент к методу визуализации в MyApp , а затем передать его на опору называется input , назначенный inputValue из MyApp «s state . Также создайте handleChange называемое handleChange и передайте ему обработчик handleChange ввода. Затем добавьте RenderInput в метод рендеринга в MyApp , затем создайте inputValue с именем input и передайте inputValue из state в него. После того, как вы закончите, вы сможете input поле input в компоненте GetInput , которое затем вызывает метод обработчика в своем родителе через реквизиты. Это обновляет ввод в state родителя, который передается как реквизит для обоих детей. Наблюдайте за тем, как данные передаются между компонентами и как единственный источник истины остается в state родительского компонента. По общему признанию, этот пример немного надуман, но должен служить для иллюстрации того, как данные и обратные вызовы могут быть переданы между компонентами React.
+
+В редакторе кода есть три компонента. MyApp компонент является родителем , который будет оказывать GetInput и RenderInput дочерние компоненты. Добавьте GetInput компонент к методу визуализации в MyApp , а затем передать его на опору называется input , назначенный inputValue из MyApp «s state . Также создайте handleChange называемое handleChange и передайте ему обработчик handleChange ввода. Затем добавьте RenderInput в метод рендеринга в MyApp , затем создайте inputValue с именем input и передайте inputValue из state в него. После того, как вы закончите, вы сможете input поле input в компоненте GetInput , которое затем вызывает метод обработчика в своем родителе через реквизиты. Это обновляет ввод в state родителя, который передается как реквизит для обоих детей. Наблюдайте за тем, как данные передаются между компонентами и как единственный источник истины остается в state родительского компонента. По общему признанию, этот пример немного надуман, но должен служить для иллюстрации того, как данные и обратные вызовы могут быть переданы между компонентами React.
+
## Tests
```yml
tests:
- - text: Компонент MyApp должен отображать.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1; })(), "The MyApp component should render.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("GetInput").length === 1; })(), "The GetInput component should render.");'
- - text: ''
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("RenderInput").length === 1; })(), "The RenderInput component should render.");'
- - text: ''
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ""}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find("input").simulate("change", {target: {value: "TestInput"}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === "" && updated_2.inputValue === "TestInput", "The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state."); }; '
- - text: ''
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: "TestName"}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find("p").text().includes("TestName"), "The RenderInput component should receive the MyApp state property inputValue as props."); }; '
+ - text: The MyApp component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1; })());
+ - text: The GetInput component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('GetInput').length === 1; })());
+ - text: The RenderInput component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('RenderInput').length === 1; })());
+ - text: The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''''}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === '''' && updated_2.inputValue === ''TestInput''); }; '
+ - text: The RenderInput component should receive the MyApp state property inputValue as props.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''TestName''}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find(''p'').text().includes(''TestName'')); }; '
```
@@ -43,7 +47,7 @@ class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
- inputValue: "
+ inputValue: ''
}
this.handleChange = this.handleChange.bind(this);
}
@@ -97,12 +101,12 @@ class RenderInput extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/pass-an-array-as-props.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/pass-an-array-as-props.russian.md
index 473c429d26..c821aa53ea 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/pass-an-array-as-props.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/pass-an-array-as-props.russian.md
@@ -3,35 +3,39 @@ id: 5a24c314108439a4d403616a
title: Pass an Array as Props
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301401
localeTitle: Передайте массив как реквизит
---
## Description
- Последняя задача продемонстрировала, как передавать информацию из родительского компонента в дочерний компонент в качестве props или свойств. В этой задаче рассматривается, как массивы могут быть переданы в качестве props . Чтобы передать массив элементу JSX, он должен рассматриваться как JavaScript и завернут в фигурные скобки.
Затем дочерний компонент имеет доступ к colors свойств массива. При доступе к свойству могут использоваться методы массива, такие как join() . const ChildComponent = (props) => <p>{props.colors.join(', ')}</p> Это объединит все элементы массива colors в строку, разделенную запятой, и произведет: <p>green, blue, red</p> Позже мы узнаем о других распространенных методах рендеринга массивов данных в React.
+
+Последняя задача продемонстрировала, как передавать информацию из родительского компонента в дочерний компонент в качестве props или свойств. В этой задаче рассматривается, как массивы могут быть переданы в качестве props . Чтобы передать массив элементу JSX, он должен рассматриваться как JavaScript и завернут в фигурные скобки.
Затем дочерний компонент имеет доступ к colors свойств массива. При доступе к свойству могут использоваться методы массива, такие как join() . const ChildComponent = (props) => <p>{props.colors.join(', ')}</p> Это объединит все элементы массива colors в строку, разделенную запятой, и произведет: <p>green, blue, red</p> Позже мы узнаем о других распространенных методах рендеринга массивов данных в React.
+
## Instructions
- В редакторе кода есть компоненты List и ToDo . При рендеринге каждого List из компонента ToDo передайте свойство tasks назначенное массиву заданий, например ["walk dog", "workout"] . Затем войдите в этот массив tasks в компоненте List , показывая его значение в p элементе. Используйте join(", ") чтобы отобразить массив props.tasks в элементе p как список, разделенный запятыми. В сегодняшнем списке должно быть не менее двух задач, а завтра должно быть не менее 3 задач.
+
+В редакторе кода есть компоненты List и ToDo . При рендеринге каждого List из компонента ToDo передайте свойство tasks назначенное массиву заданий, например ["walk dog", "workout"] . Затем войдите в этот массив tasks в компоненте List , показывая его значение в p элементе. Используйте join(", ") чтобы отобразить массив props.tasks в элементе p как список, разделенный запятыми. В сегодняшнем списке должно быть не менее двух задач, а завтра должно быть не менее 3 задач.
+
## Tests
```yml
tests:
- - text: Компонент ToDo должен возвращать один внешний div .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === "div"; })(), "The ToDo component should return a single outer div.");'
- - text: Третий ребенок компонента ToDo должен быть экземпляром компонента List .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === "List"; })(), "The third child of the ToDo component should be an instance of the List component.");'
- - text: Пятый дочерний компонент ToDo должен быть экземпляром компонента List .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === "List"; })(), "The fifth child of the ToDo component should be an instance of the List component.");'
- - text: 'Оба экземпляра компонента List должны иметь свойство, называемое tasks а tasks должны иметь тип массива.'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find("List").get(0).props.tasks) && Array.isArray(mockedComponent.find("List").get(1).props.tasks); })(), "Both instances of the List component should have a property called tasks and tasks should be of type array.");'
- - text: 'Первый компонент List представляющий задачи на сегодняшний день, должен иметь 2 или более элемента.'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("List").get(0).props.tasks.length >= 2; })(), "The first List component representing the tasks for today should have 2 or more items.");'
- - text: 'Второй компонент List представляющий задачи на завтра, должен иметь 3 или более элементов.'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("List").get(1).props.tasks.length >= 3; })(), "The second List component representing the tasks for tomorrow should have 3 or more items.");'
- - text: 'Компонент List должен отображать значение из поддержки tasks в теге p как список, разделенный запятой, например, walk dog, workout .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("p").get(0).props.children === mockedComponent.find("List").get(0).props.tasks.join(", ") && mockedComponent.find("p").get(1).props.children === mockedComponent.find("List").get(1).props.tasks.join(", "); })(), "The List component should render the value from the tasks prop in the p tag as a comma separated list, for example walk dog, workout.");'
+ - text: The ToDo component should return a single outer div.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === 'div'; })());
+ - text: The third child of the ToDo component should be an instance of the List component.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === 'List'; })());
+ - text: The fifth child of the ToDo component should be an instance of the List component.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === 'List'; })());
+ - text: Both instances of the List component should have a property called tasks and tasks should be of type array.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find('List').get(0).props.tasks) && Array.isArray(mockedComponent.find('List').get(1).props.tasks); })());
+ - text: The first List component representing the tasks for today should have 2 or more items.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(0).props.tasks.length >= 2; })());
+ - text: The second List component representing the tasks for tomorrow should have 3 or more items.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(1).props.tasks.length >= 3; })());
+ - text: The List component should render the value from the tasks prop in the p tag.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('p').get(0).props.children === mockedComponent.find('List').get(0).props.tasks.join(', ') && mockedComponent.find('p').get(1).props.children === mockedComponent.find('List').get(1).props.tasks.join(', '); })());
```
@@ -43,7 +47,7 @@ tests:
```jsx
-const List= (props) => {
+const List = (props) => {
{ /* change code below this line */ }
return
{}
{ /* change code above this line */ }
@@ -72,12 +76,12 @@ class ToDo extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.russian.md
index f0af38bdb7..49df85044d 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d4036169
title: Pass Props to a Stateless Functional Component
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301402
localeTitle: Передача реквизитов функциональному компоненту без состояния
---
## Description
- Предыдущие проблемы много касались создания и компоновки элементов JSX, функциональных компонентов и компонентов класса стиля ES6 в React. С этим основанием пришло время взглянуть на еще одну особенность, часто встречающуюся в React: реквизитах . В React вы можете передать реквизиты или свойства дочерним компонентам. Скажем, у вас есть компонент App который отображает дочерний компонент Welcome который является функциональным компонентом без состояния. Вы можете пройти Welcome в user собственность, написав:
<App> <Welcome user = 'Mark' /> </ Приложение>
Вы используете пользовательские атрибуты HTML, которые React предоставляет поддержку для передачи user свойства в компонент Welcome . Поскольку Welcome является функциональным компонентом без состояния, он имеет доступ к этому значению следующим образом:
Стандартно вызывать это значение props и при работе с функциональными компонентами без состояния, вы в основном рассматриваете его как аргумент функции, которая возвращает JSX. Вы можете получить доступ к значению аргумента в теле функции. С компонентами класса вы увидите, что это немного отличается.
+
+Предыдущие проблемы много касались создания и компоновки элементов JSX, функциональных компонентов и компонентов класса стиля ES6 в React. С этим основанием пришло время взглянуть на еще одну особенность, часто встречающуюся в React: реквизитах . В React вы можете передать реквизиты или свойства дочерним компонентам. Скажем, у вас есть компонент App который отображает дочерний компонент Welcome который является функциональным компонентом без состояния. Вы можете пройти Welcome в user собственность, написав:
<App> <Welcome user = 'Mark' /> </ Приложение>
Вы используете пользовательские атрибуты HTML, которые React предоставляет поддержку для передачи user свойства в компонент Welcome . Поскольку Welcome является функциональным компонентом без состояния, он имеет доступ к этому значению следующим образом:
Стандартно вызывать это значение props и при работе с функциональными компонентами без состояния, вы в основном рассматриваете его как аргумент функции, которая возвращает JSX. Вы можете получить доступ к значению аргумента в теле функции. С компонентами класса вы увидите, что это немного отличается.
+
## Instructions
- В редакторе кода CurrentDate компоненты Calendar и CurrentDate . При рендеринге CurrentDate из компонента Calendar передайте свойство date назначенное текущей дате из объекта Date JavaScript. Затем получите доступ к этой prop в компоненте CurrentDate , показывая ее значение в тегах p . Обратите внимание, что для значений prop которые будут оцениваться как JavaScript, они должны быть заключены в фигурные скобки, например date={Date()} .
+
+В редакторе кода CurrentDate компоненты Calendar и CurrentDate . При рендеринге CurrentDate из компонента Calendar передайте свойство date назначенное текущей дате из объекта Date JavaScript. Затем получите доступ к этой prop в компоненте CurrentDate , показывая ее значение в тегах p . Обратите внимание, что для значений prop которые будут оцениваться как JavaScript, они должны быть заключены в фигурные скобки, например date={Date()} .
+
## Tests
```yml
tests:
- - text: Компонент Calendar должен возвращать один элемент div .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === "div"; })(), "The Calendar component should return a single div element.");'
- - text: Второй дочерний компонент компонента Calendar должен быть компонентом CurrentDate .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === "CurrentDate"; })(), "The second child of the Calendar component should be the CurrentDate component.");'
- - text: 'Компонент CurrentDate должен иметь опору, названную date .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), "The CurrentDate component should have a prop called date.");'
- - text: CurrentDatedateCurrentDate должен содержать строку текста.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === "string" && prop.length > 0 ); })(), "The date prop of the CurrentDate should contain a string of text.");'
- - text: Компонент CurrentDate должен отображать значение с date prop в теге p .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find("p").html().includes(Date().substr(3)); })(), "The CurrentDate component should render the value from the date prop in the p tag.");'
+ - text: The Calendar component should return a single div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === 'div'; })());
+ - text: The second child of the Calendar component should be the CurrentDate component.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === 'CurrentDate'; })());
+ - text: The CurrentDate component should have a prop called date.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })());
+ - text: The date prop of the CurrentDate should contain a string of text.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === 'string' && prop.length > 0 ); })());
+ - text: The CurrentDate component should render the value from the date prop in the p tag.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find('p').html().includes(Date().substr(3)); })());
```
@@ -69,12 +73,12 @@ class Calendar extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ { /* change code below this line */ }
+
+ { /* change code above this line */ }
+
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/pass-state-as-props-to-child-components.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/pass-state-as-props-to-child-components.russian.md
index d91864f9b2..89e5f8fe1a 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/pass-state-as-props-to-child-components.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/pass-state-as-props-to-child-components.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d403617a
title: Pass State as Props to Child Components
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301403
localeTitle: Состояние передачи в качестве компонентов реквизита для детей
---
## Description
- Вы видели множество примеров, которые передавали реквизиты дочерним элементам JSX и компонентам Child React в предыдущих задачах. Вам может быть интересно, откуда берутся эти реквизиты. Общим примером является наличие компонента с состоянием, содержащего state важное для вашего приложения, которое затем отображает дочерние компоненты. Вы хотите, чтобы эти компоненты имели доступ к некоторым частям этого state , которые передаются в качестве реквизита. Например, возможно, у вас есть компонент App который отображает Navbar , среди других компонентов. В вашем App вас есть state которое содержит много информации о пользователе, но Navbar нуждается только в доступе к имени пользователя пользователя, чтобы он мог отображать его. Вы передаете эту часть state компоненту Navbar в качестве опоры. Этот шаблон иллюстрирует некоторые важные парадигмы в Реактите. Первый - однонаправленный поток данных . Государство течет в одном направлении вниз по дереву компонентов вашего приложения, от родительского компонента с состоянием до дочерних компонентов. Детские компоненты получают только данные состояния, в которых они нуждаются. Во-вторых, сложные приложения с установленным состоянием могут быть разбиты на несколько или один компонент с состоянием. Остальные компоненты просто получают состояние от родителя как реквизита и отображают пользовательский интерфейс из этого состояния. Он начинает создавать разделение, в котором управление состоянием обрабатывается в одной части кода и визуализации пользовательского интерфейса в другой. Этот принцип отделения логики состояния от логики пользовательского интерфейса является одним из ключевых принципов Реакта. Когда он используется правильно, он упрощает управление сложными приложениями с сохранением состояния.
+
+Вы видели множество примеров, которые передавали реквизиты дочерним элементам JSX и компонентам Child React в предыдущих задачах. Вам может быть интересно, откуда берутся эти реквизиты. Общим примером является наличие компонента с состоянием, содержащего state важное для вашего приложения, которое затем отображает дочерние компоненты. Вы хотите, чтобы эти компоненты имели доступ к некоторым частям этого state , которые передаются в качестве реквизита. Например, возможно, у вас есть компонент App который отображает Navbar , среди других компонентов. В вашем App вас есть state которое содержит много информации о пользователе, но Navbar нуждается только в доступе к имени пользователя пользователя, чтобы он мог отображать его. Вы передаете эту часть state компоненту Navbar в качестве опоры. Этот шаблон иллюстрирует некоторые важные парадигмы в Реактите. Первый - однонаправленный поток данных . Государство течет в одном направлении вниз по дереву компонентов вашего приложения, от родительского компонента с состоянием до дочерних компонентов. Детские компоненты получают только данные состояния, в которых они нуждаются. Во-вторых, сложные приложения с установленным состоянием могут быть разбиты на несколько или один компонент с состоянием. Остальные компоненты просто получают состояние от родителя как реквизита и отображают пользовательский интерфейс из этого состояния. Он начинает создавать разделение, в котором управление состоянием обрабатывается в одной части кода и визуализации пользовательского интерфейса в другой. Этот принцип отделения логики состояния от логики пользовательского интерфейса является одним из ключевых принципов Реакта. Когда он используется правильно, он упрощает управление сложными приложениями с сохранением состояния.
+
## Instructions
- Компонент MyApp имеет Navbar stateful и отображает компонент Navbar в качестве дочернего элемента. Передайте свойство name в его state до дочернего компонента, затем покажите name в теге h1 который является частью Navbar рендеринга Navbar .
+
+Компонент MyApp имеет Navbar stateful и отображает компонент Navbar в качестве дочернего элемента. Передайте свойство name в его state до дочернего компонента, затем покажите name в теге h1 который является частью Navbar рендеринга Navbar .
+
## Tests
```yml
tests:
- - text: Компонент MyApp должен отображаться внутри компонента Navbar .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1 && mockedComponent.find("Navbar").length === 1; })(), "The MyApp component should render with a Navbar component inside.");'
- - text: Компонент Navbar должен получить name свойства MyApp качестве реквизита.
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").props() )}; const navProps = await setState(); assert(navProps.name === "TestName", "The Navbar component should receive the MyApp state property name as props."); }; '
- - text: Элемент h1 в Navbar должен отображать name prop.
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find("Navbar").find("h1").text(); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").find("h1").text() )}; const navH1After = await setState(); assert(new RegExp("TestName").test(navH1After) && navH1After !== navH1Before, "The h1 element in Navbar should render the name prop."); }; '
+ - text: The MyApp component should render with a Navbar component inside.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1 && mockedComponent.find('Navbar').length === 1; })());
+ - text: The Navbar component should receive the MyApp state property name as props.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').props() )}; const navProps = await setState(); assert(navProps.name === ''TestName''); }; '
+ - text: The h1 element in Navbar should render the name prop.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find(''Navbar'').find(''h1'').text(); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').find(''h1'').text() )}; const navH1After = await setState(); assert(new RegExp(''TestName'').test(navH1After) && navH1After !== navH1Before); }; '
```
@@ -58,7 +62,7 @@ class Navbar extends React.Component {
render() {
return (
-
Hello, my name is: /* your code here */
+
Hello, my name is: {/* your code here */}
);
}
@@ -68,12 +72,12 @@ class Navbar extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/render-a-class-component-to-the-dom.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/render-a-class-component-to-the-dom.russian.md
index c828c2b07e..1aeabec5f7 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/render-a-class-component-to-the-dom.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/render-a-class-component-to-the-dom.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036167
title: Render a Class Component to the DOM
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301404
localeTitle: Отобразить компонент класса в DOM
---
## Description
- Вы можете вспомнить использование ReactDOM API в более ранней попытке визуализации элементов JSX в DOM. Процесс рендеринга компонентов React будет выглядеть очень похоже. Последние несколько проблем были сосредоточены на компонентах и составе, поэтому рендеринг был сделан для вас за кулисами. Однако ни один из написанного вами кода React не будет отображаться в DOM без обращения к ReactDOM API. Ниже приведен синтаксис: ReactDOM.render(componentToRender, targetNode) . Первый аргумент - это компонент React, который вы хотите отобразить. Второй аргумент - это узел DOM, который вы хотите отобразить внутри этого компонента. Компоненты React передаются в ReactDOM.render() несколько иначе, чем элементы JSX. Для элементов JSX вы передаете имя элемента, который вы хотите отобразить. Однако для компонентов React вам нужно использовать тот же синтаксис, как если бы вы отображали вложенный компонент, например ReactDOM.render(<ComponentToRender />, targetNode) . Этот синтаксис используется для компонентов класса ES6 и функциональных компонентов.
+
+Вы можете вспомнить использование ReactDOM API в более ранней попытке визуализации элементов JSX в DOM. Процесс рендеринга компонентов React будет выглядеть очень похоже. Последние несколько проблем были сосредоточены на компонентах и составе, поэтому рендеринг был сделан для вас за кулисами. Однако ни один из написанного вами кода React не будет отображаться в DOM без обращения к ReactDOM API. Ниже приведен синтаксис: ReactDOM.render(componentToRender, targetNode) . Первый аргумент - это компонент React, который вы хотите отобразить. Второй аргумент - это узел DOM, который вы хотите отобразить внутри этого компонента. Компоненты React передаются в ReactDOM.render() несколько иначе, чем элементы JSX. Для элементов JSX вы передаете имя элемента, который вы хотите отобразить. Однако для компонентов React вам нужно использовать тот же синтаксис, как если бы вы отображали вложенный компонент, например ReactDOM.render(<ComponentToRender />, targetNode) . Этот синтаксис используется для компонентов класса ES6 и функциональных компонентов.
+
## Instructions
- Компоненты « Fruits и Vegetables определены для вас за кулисами. Выделите оба компонента как дочерние TypesOfFood компонента TypesOfFood , а затем визуализируйте TypesOfFood в DOM. Для вас доступен div с id='challenge-node' .
+
+Компоненты « Fruits и Vegetables определены для вас за кулисами. Выделите оба компонента как дочерние TypesOfFood компонента TypesOfFood , а затем визуализируйте TypesOfFood в DOM. Для вас доступен div с id='challenge-node' .
+
## Tests
```yml
tests:
- - text: Компонент TypesOfFood должен возвращать один элемент div .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The TypesOfFood component should return a single div element.");'
- - text: Компонент TypesOfFood должен отображать компонент Fruits после элемента h1 .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The TypesOfFood component should render the Fruits component after the h1 element.");'
- - text: Компонент TypesOfFood должен отображать компонент « Vegetables после Fruits .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The TypesOfFood component should render the Vegetables component after Fruits.");'
- - text: Компонент TypesOfFood должен отображать DOM внутри div с идентификационным challenge-node id.
- testString: 'assert((function() { const html = document.getElementById("challenge-node").childNodes[0].innerHTML; return (html === "
Types of Food:
Fruits:
Non-Citrus:
Apples
Blueberries
Strawberries
Bananas
Citrus:
Lemon
Lime
Orange
Grapefruit
Vegetables:
Brussel Sprouts
Broccoli
Squash
"); })(), "The TypesOfFood component should render to the DOM within the div with the id challenge-node.");'
+ - text: The TypesOfFood component should return a single div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })());
+ - text: The TypesOfFood component should render the Fruits component after the h1 element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })());
+ - text: The TypesOfFood component should render the Vegetables component after Fruits.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })());
+ - text: The TypesOfFood component should render to the DOM within the div with the id challenge-node.
+ testString: assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '
Types of Food:
Fruits:
Non-Citrus:
Apples
Blueberries
Strawberries
Bananas
Citrus:
Lemon
Lime
Orange
Grapefruit
Vegetables:
Brussel Sprouts
Broccoli
Squash
'); })());
```
@@ -59,7 +63,7 @@ class TypesOfFood extends React.Component {
-### Before Test
+### Before Tests
+ {/* change code below this line */}
+
+
+ {/* change code above this line */}
+
+ );
+ }
+};
+
+// change code below this line
+ReactDOM.render(, document.getElementById('challenge-node'));
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/render-conditionally-from-props.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/render-conditionally-from-props.russian.md
index 14058efb87..25b4b7135a 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/render-conditionally-from-props.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/render-conditionally-from-props.russian.md
@@ -3,35 +3,42 @@ id: 5a24c314108439a4d4036188
title: Render Conditionally from Props
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301405
localeTitle: Отказывать условно от реквизита
---
## Description
-undefined
+
+So far, you've seen how to use if/else, &&,null and the ternary operator (condition ? expressionIfTrue : expressionIfFalse) to make conditional decisions about what to render and when. However, there's one important topic left to discuss that lets you combine any or all of these concepts with another powerful React feature: props. Using props to conditionally render code is very common with React developers — that is, they use the value of a given prop to automatically make decisions about what to render.
+In this challenge, you'll set up a child component to make rendering decisions based on props. You'll also use the ternary operator, but you can see how several of the other concepts that were covered in the last few challenges might be just as useful in this context.
+
## Instructions
-undefined
+
+The code editor has two components that are partially defined for you: a parent called GameOfChance, and a child called Results. They are used to create a simple game where the user presses a button to see if they win or lose.
+First, you'll need a simple expression that randomly returns a different value every time it is run. You can use Math.random(). This method returns a value between 0 (inclusive) and 1 (exclusive) each time it is called. So for 50/50 odds, use Math.random() >= .5 in your expression. Statistically speaking, this expression will return true 50% of the time, and false the other 50%. On line 30, replace the comment with this expression to complete the variable declaration.
+Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the Results component as a child of GameOfChance, and pass in expression as a prop called fiftyFifty. In the Results component, write a ternary expression to render the text "You Win!" or "You Lose!" based on the fiftyFifty prop that's being passed in from GameOfChance. Finally, make sure the handleClick() method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("GameOfChance").length, 1, "The GameOfChance component should exist and render to the page.");'
- - text: ''
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("button").length, 1, "GameOfChance should return a single button element.");'
- - text: ''
- testString: 'assert(Enzyme.mount(React.createElement(GameOfChance)).find("Results").length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find("Results").props().hasOwnProperty("fiftyFifty") === true, "GameOfChance should return a single instance of the Results component, which has a prop called fiftyFifty.");'
- - text: ''
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, "GameOfChance state should be initialized with a property of counter set to a value of 1.");'
- - text: ''
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find("p").text(), "Turn: 1", "When the GameOfChance component is first rendered to the DOM, a p element should be returned with the inner text of Turn: 1.");'
- - text: ''
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find("button").simulate("click"); };const result = () => ({ count: comp.state("counter"), text: comp.find("p").text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === "Turn: 2" && _2_val.count === 3 && _2_val.text === "Turn: 3" && _3_val.count === 4 && _3_val.text === "Turn: 4" && _4_val.count === 5 && _4_val.text === "Turn: 5" && _5_val.count === 6 && _5_val.text === "Turn: 6", "Each time the button is clicked, the counter state should be incremented by a value of 1, and a single p element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state."); }; '
- - text: ''
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find("button").simulate("click"); };const result = () => ({ h1: comp.find("h1").length, text: comp.find("h1").text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1, "When the GameOfChance component is first mounted to the DOM and each time the button is clicked thereafter, a single h1 element should be returned that randomly renders either You Win! or You Lose!."); }; '
+ - text: The GameOfChance component should exist and render to the page.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length, 1);
+ - text: GameOfChance should return a single button element.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('button').length, 1);
+ - text: GameOfChance should return a single instance of the Results component, which has a prop called fiftyFifty.
+ testString: assert(Enzyme.mount(React.createElement(GameOfChance)).find('Results').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find('Results').props().hasOwnProperty('fiftyFifty') === true);
+ - text: GameOfChance state should be initialized with a property of counter set to a value of 1.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1);
+ - text: 'When the GameOfChance component is first rendered to the DOM, a p element should be returned with the inner text of Turn: 1.'
+ testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find(''p'').text(), ''Turn: 1'');'
+ - text: 'Each time the button is clicked, the counter state should be incremented by a value of 1, and a single p element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state.'
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find(''button'').simulate(''click''); };const result = () => ({ count: comp.state(''counter''), text: comp.find(''p'').text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === ''Turn: 2'' && _2_val.count === 3 && _2_val.text === ''Turn: 3'' && _3_val.count === 4 && _3_val.text === ''Turn: 4'' && _4_val.count === 5 && _4_val.text === ''Turn: 5'' && _5_val.count === 6 && _5_val.text === ''Turn: 6''); }; '
+ - text: When the GameOfChance component is first mounted to the DOM and each time the button is clicked thereafter, a single h1 element should be returned that randomly renders either You Win! or You Lose!.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find(''button'').simulate(''click''); };const result = () => ({ h1: comp.find(''h1'').length, text: comp.find(''h1'').text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1); }; '
```
@@ -72,7 +79,7 @@ class GameOfChance extends React.Component {
});
}
render() {
- let expression = null; // change code here
+ const expression = null; // change code here
return (
@@ -89,12 +96,12 @@ class GameOfChance extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/render-html-elements-to-the-dom.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/render-html-elements-to-the-dom.russian.md
index 036e5181ca..65c719fa5b 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/render-html-elements-to-the-dom.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/render-html-elements-to-the-dom.russian.md
@@ -3,29 +3,33 @@ id: 5a24bbe0dba28a8d3cbd4c5f
title: Render HTML Elements to the DOM
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301406
localeTitle: Выделение HTML-элементов в DOM
---
## Description
- До сих пор вы узнали, что JSX - удобный инструмент для записи читаемого HTML в JavaScript. С помощью React мы можем передать этот JSX непосредственно в HTML DOM с использованием API рендеринга React, известного как ReactDOM. ReactDOM предлагает простой способ визуализации элементов React в DOM, который выглядит так: ReactDOM.render(componentToRender, targetNode) , где первым аргументом является элемент React или компонент, который вы хотите отобразить, а второй аргумент - узел DOM что вы хотите отобразить компонент. Как и следовало ожидать, ReactDOM.render() должен вызываться после объявлений элементов JSX, так же, как вы должны объявлять переменные перед их использованием.
+
+До сих пор вы узнали, что JSX - удобный инструмент для записи читаемого HTML в JavaScript. С помощью React мы можем передать этот JSX непосредственно в HTML DOM с использованием API рендеринга React, известного как ReactDOM. ReactDOM предлагает простой способ визуализации элементов React в DOM, который выглядит так: ReactDOM.render(componentToRender, targetNode) , где первым аргументом является элемент React или компонент, который вы хотите отобразить, а второй аргумент - узел DOM что вы хотите отобразить компонент. Как и следовало ожидать, ReactDOM.render() должен вызываться после объявлений элементов JSX, так же, как вы должны объявлять переменные перед их использованием.
+
## Instructions
- Редактор кода имеет простой компонент JSX. Используйте метод ReactDOM.render() чтобы отобразить этот компонент на странице. Вы можете передать определенные элементы JSX непосредственно в качестве первого аргумента и использовать document.getElementById() чтобы выбрать узел DOM для их рендеринга. Для вас доступен div с id='challenge-node' . Убедитесь, что вы не изменяете константу JSX .
+
+Редактор кода имеет простой компонент JSX. Используйте метод ReactDOM.render() чтобы отобразить этот компонент на странице. Вы можете передать определенные элементы JSX непосредственно в качестве первого аргумента и использовать document.getElementById() чтобы выбрать узел DOM для их рендеринга. Для вас доступен div с id='challenge-node' . Убедитесь, что вы не изменяете константу JSX .
+
## Tests
```yml
tests:
- - text: Постоянный JSX должен возвращать элемент div .
- testString: 'assert(JSX.type === "div", "The constant JSX should return a div element.");'
- - text: div должен содержать тег h1 как первый элемент.
- testString: 'assert(JSX.props.children[0].type === "h1", "The div should contain an h1 tag as the first element.");'
- - text: В div должен быть тег p как второй элемент.
- testString: 'assert(JSX.props.children[1].type === "p", "The div should contain a p tag as the second element.");'
- - text: 'При условии , JSX элемент должен оказывать узел DOM с идентификатором challenge-node .'
- testString: 'assert(document.getElementById("challenge-node").childNodes[0].innerHTML === "
Hello World
Lets render this to the DOM
", "The provided JSX element should render to the DOM node with id challenge-node.");'
+ - text: The constant JSX should return a div element.
+ testString: assert(JSX.type === 'div');
+ - text: The div should contain an h1 tag as the first element.
+ testString: assert(JSX.props.children[0].type === 'h1');
+ - text: The div should contain a p tag as the second element.
+ testString: assert(JSX.props.children[1].type === 'p');
+ - text: The provided JSX element should render to the DOM node with id challenge-node.
+ testString: assert(document.getElementById('challenge-node').childNodes[0].innerHTML === '
+);
+// change code below this line
+ReactDOM.render(JSX, document.getElementById('challenge-node'));
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.russian.md
index 139bc8e969..b470a7f20b 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.russian.md
@@ -3,23 +3,27 @@ id: 5a24c314108439a4d403618d
title: Render React on the Server with renderToString
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301407
localeTitle: Render React на сервере с помощью renderToString
---
## Description
- До сих пор вы предоставляли компоненты React на клиенте. Обычно это то, что вы всегда будете делать. Однако есть некоторые варианты использования, когда имеет смысл отображать на сервере компонент React. Так как React - это библиотека просмотра JavaScript, и вы можете запускать JavaScript на сервере с помощью Node, это возможно. Фактически, React предоставляет метод renderToString() который вы можете использовать для этой цели. Существует две основные причины, по которым рендеринг на сервере может быть использован в приложении реального мира. Во-первых, без этого приложения React будут состоять из относительно пустого HTML-файла и большого пакета JavaScript, когда он первоначально загружен в браузер. Это может быть не идеальным для поисковых систем, которые пытаются индексировать содержимое ваших страниц, чтобы люди могли вас найти. Если вы визуализируете начальную разметку HTML на сервере и отправляете ее клиенту, загрузка начальной страницы содержит всю разметку страницы, которая может быть сканирована поисковыми системами. Во-вторых, это создает более быструю загрузку начальной загрузки страницы, поскольку отображаемый HTML меньше, чем код JavaScript всего приложения. React по-прежнему сможет распознать ваше приложение и управлять им после начальной загрузки.
+
+До сих пор вы предоставляли компоненты React на клиенте. Обычно это то, что вы всегда будете делать. Однако есть некоторые варианты использования, когда имеет смысл отображать на сервере компонент React. Так как React - это библиотека просмотра JavaScript, и вы можете запускать JavaScript на сервере с помощью Node, это возможно. Фактически, React предоставляет метод renderToString() который вы можете использовать для этой цели. Существует две основные причины, по которым рендеринг на сервере может быть использован в приложении реального мира. Во-первых, без этого приложения React будут состоять из относительно пустого HTML-файла и большого пакета JavaScript, когда он первоначально загружен в браузер. Это может быть не идеальным для поисковых систем, которые пытаются индексировать содержимое ваших страниц, чтобы люди могли вас найти. Если вы визуализируете начальную разметку HTML на сервере и отправляете ее клиенту, загрузка начальной страницы содержит всю разметку страницы, которая может быть сканирована поисковыми системами. Во-вторых, это создает более быструю загрузку начальной загрузки страницы, поскольку отображаемый HTML меньше, чем код JavaScript всего приложения. React по-прежнему сможет распознать ваше приложение и управлять им после начальной загрузки.
+
## Instructions
- Метод renderToString() предоставляется на ReactDOMServer , который доступен здесь как глобальный объект. Метод принимает один аргумент, который является элементом React. Используйте это, чтобы отобразить App в строку.
+
+Метод renderToString() предоставляется на ReactDOMServer , который доступен здесь как глобальный объект. Метод принимает один аргумент, который является элементом React. Используйте это, чтобы отобразить App в строку.
+
## Tests
```yml
tests:
- - text: Компонент App должен отображать строку с помощью ReactDOMServer.renderToString .
- testString: 'getUserInput => assert(getUserInput("index").replace(/ /g,"").includes("ReactDOMServer.renderToString()") && Enzyme.mount(React.createElement(App)).children().name() === "div", "The App component should render to a string using ReactDOMServer.renderToString.");'
+ - text: The App component should render to a string using ReactDOMServer.renderToString.
+ testString: getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString()') && Enzyme.mount(React.createElement(App)).children().name() === 'div');
```
@@ -46,7 +50,7 @@ class App extends React.Component {
-### Before Test
+### Before Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
@@ -70,7 +75,18 @@ console.info('after the test');
## Solution
-```js
-// solution required
+```jsx
+class App extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return
+ }
+};
+
+// change code below this line
+ReactDOMServer.renderToString();
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.russian.md
index 686ffb33a4..c65a2dd080 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036172
title: Render State in the User Interface Another Way
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301408
localeTitle: Показывать состояние в пользовательском интерфейсе другим способом
---
## Description
- Существует еще один способ доступа к state в компоненте. В методе render() перед оператором return вы можете напрямую писать JavaScript. Например, вы можете объявлять функции, получать доступ к данным из state или props , выполнять вычисления по этим данным и т. Д. Затем вы можете назначить любые данные переменным, к которым у вас есть доступ в операторе return .
+
+Существует еще один способ доступа к state в компоненте. В методе render() перед оператором return вы можете напрямую писать JavaScript. Например, вы можете объявлять функции, получать доступ к данным из state или props , выполнять вычисления по этим данным и т. Д. Затем вы можете назначить любые данные переменным, к которым у вас есть доступ в операторе return .
+
## Instructions
- В MyComponent метода отрисовки, определит const называется name и установите его равным значению имени в компоненте state . Поскольку вы можете писать JavaScript непосредственно в этой части кода, вам не нужно вставлять эту ссылку в фигурные скобки. Затем в возвращаемом выражении выведите это значение в тег h1 используя name переменной. Помните, что в операторе return вам нужно использовать синтаксис JSX (фигурные скобки для JavaScript).
+
+В MyComponent метода отрисовки, определит const называется name и установите его равным значению имени в компоненте state . Поскольку вы можете писать JavaScript непосредственно в этой части кода, вам не нужно вставлять эту ссылку в фигурные скобки. Затем в возвращаемом выражении выведите это значение в тег h1 используя name переменной. Помните, что в операторе return вам нужно использовать синтаксис JSX (фигурные скобки для JavaScript).
+
## Tests
```yml
tests:
- - text: MyComponent должен иметь ключевое name со значением freeCodeCamp сохраненным в его состоянии.
- testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "MyComponent should have a key name with value freeCodeCamp stored in its state.");'
- - text: MyComponent должен отображать заголовок h1 заключенный в один div .
- testString: 'assert(/
.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), "MyComponent should render an h1 header enclosed in a single div.");'
- - text: 'Представленный тег h1 должен содержать ссылку на {name} .'
- testString: 'getUserInput => assert(/
\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput("index")), "The rendered h1 tag should include a reference to {name}.");'
- - text: 'Представленный h1 заголовок должен содержать текст, отображаемый из состояния компонента.'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "
TestName
", "The rendered h1 header should contain text rendered from the component's state."); };'
+ - text: MyComponent should have a key name with value freeCodeCamp stored in its state.
+ testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp');
+ - text: MyComponent should render an h1 header enclosed in a single div.
+ testString: assert(/
.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()));
+ - text: The rendered h1 tag should include a reference to {name}.
+ testString: getUserInput => assert(/
\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')));
+ - text: The rendered h1 header should contain text rendered from the component's state.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface.russian.md
index 81f1c78f2f..e5bac46f2f 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/render-state-in-the-user-interface.russian.md
@@ -3,27 +3,32 @@ id: 5a24c314108439a4d4036171
title: Render State in the User Interface
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301409
localeTitle: Состояние визуализации в пользовательском интерфейсе
---
## Description
- Как только вы определяете начальное состояние компонента, вы можете отобразить любую его часть в визуализированном пользовательском интерфейсе. Если компонент является состоятельным, он всегда будет иметь доступ к данным в state в методе render() . Вы можете получить доступ к данным с помощью this.state . Если вы хотите получить доступ к значению состояния в return метода рендеринга, вы должны заключить его в фигурные скобки. State - одна из самых мощных особенностей компонентов в React. Он позволяет отслеживать важные данные в вашем приложении и отображать пользовательский интерфейс в ответ на изменения этих данных. Если ваши данные изменятся, ваш пользовательский интерфейс изменится. React использует то, что называется виртуальным DOM, чтобы отслеживать изменения за кулисами. Когда данные состояния обновляются, он запускает повторную визуализацию компонентов с использованием этих данных, включая дочерние компоненты, которые получили данные в качестве опоры. React обновляет фактический DOM, но только там, где это необходимо. Это означает, что вам не нужно беспокоиться об изменении DOM. Вы просто заявляете, как должен выглядеть пользовательский интерфейс. Обратите внимание, что если вы создаете компонент с состоянием, никакие другие компоненты не знают о его state . Его state полностью инкапсулировано или локально для этого компонента, если вы не передадите данные состояния дочернему компоненту в качестве props . Это понятие инкапсулированного state очень важно, поскольку оно позволяет вам писать определенную логику, а затем содержать и изолировать эту логику в одном месте вашего кода.
+
+Как только вы определяете начальное состояние компонента, вы можете отобразить любую его часть в визуализированном пользовательском интерфейсе. Если компонент является состоятельным, он всегда будет иметь доступ к данным в state в методе render() . Вы можете получить доступ к данным с помощью this.state . Если вы хотите получить доступ к значению состояния в return метода рендеринга, вы должны заключить его в фигурные скобки. State - одна из самых мощных особенностей компонентов в React. Он позволяет отслеживать важные данные в вашем приложении и отображать пользовательский интерфейс в ответ на изменения этих данных. Если ваши данные изменятся, ваш пользовательский интерфейс изменится. React использует то, что называется виртуальным DOM, чтобы отслеживать изменения за кулисами. Когда данные состояния обновляются, он запускает повторную визуализацию компонентов с использованием этих данных, включая дочерние компоненты, которые получили данные в качестве опоры. React обновляет фактический DOM, но только там, где это необходимо. Это означает, что вам не нужно беспокоиться об изменении DOM. Вы просто заявляете, как должен выглядеть пользовательский интерфейс. Обратите внимание, что если вы создаете компонент с состоянием, никакие другие компоненты не знают о его state . Его state полностью инкапсулировано или локально для этого компонента, если вы не передадите данные состояния дочернему компоненту в качестве props . Это понятие инкапсулированного state очень важно, поскольку оно позволяет вам писать определенную логику, а затем содержать и изолировать эту логику в одном месте вашего кода.
+
## Instructions
-undefined
+
+In the code editor, MyComponent is already stateful. Define an h1 tag in the component's render method which renders the value of name from the component's state.
+Note: The h1 should only render the value from state and nothing else. In JSX, any code you write with curly braces { } will be treated as JavaScript. So to access the value from state just enclose the reference in curly braces.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "MyComponent should have a key name with value freeCodeCamp stored in its state.");'
- - text: MyComponent должен отображать заголовок h1 заключенный в один div .
- testString: 'assert(/
.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), "MyComponent should render an h1 header enclosed in a single div.");'
- - text: 'Представленный h1 заголовок должен содержать текст, отображаемый из состояния компонента.'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "
TestName
", "The rendered h1 header should contain text rendered from the component's state.");};'
+ - text: MyComponent should have a key name with value freeCodeCamp stored in its state.
+ testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp');
+ - text: MyComponent should render an h1 header enclosed in a single div.
+ testString: assert(/
.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()));
+ - text: The rendered h1 header should contain text rendered from the component's state.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/render-with-an-if-else-condition.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/render-with-an-if-else-condition.russian.md
index c620a36e5a..6056dc4d3f 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/render-with-an-if-else-condition.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/render-with-an-if-else-condition.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036184
title: Render with an If-Else Condition
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301410
localeTitle: Выдавать с условием If-Else
---
## Description
- Еще одно применение JavaScript для управления вашим визуализированным представлением - связать элементы, которые отображаются в состоянии. Когда условие истинно, отображается один вид. Когда это ложно, это другое мнение. Вы можете сделать это с помощью стандартного оператора if/else в методе render() компонента React.
+
+Еще одно применение JavaScript для управления вашим визуализированным представлением - связать элементы, которые отображаются в состоянии. Когда условие истинно, отображается один вид. Когда это ложно, это другое мнение. Вы можете сделать это с помощью стандартного оператора if/else в методе render() компонента React.
+
## Instructions
- MyComponent содержит boolean в своем состоянии, которое отслеживает, хотите ли вы отображать какой-либо элемент в пользовательском интерфейсе или нет. button переключает состояние этого значения. В настоящее время он отображает один и тот же пользовательский интерфейс каждый раз. Перепишите метод render() с инструкцией if/else чтобы, если displaytrue , вы возвращаете текущую разметку. В противном случае верните разметку без элемента h1 . Примечание. Вы должны написать if/else для прохождения тестов. Использование тернарного оператора здесь не будет.
+
+MyComponent содержит boolean в своем состоянии, которое отслеживает, хотите ли вы отображать какой-либо элемент в пользовательском интерфейсе или нет. button переключает состояние этого значения. В настоящее время он отображает один и тот же пользовательский интерфейс каждый раз. Перепишите метод render() с инструкцией if/else чтобы, если displaytrue , вы возвращаете текущую разметку. В противном случае верните разметку без элемента h1 . Примечание. Вы должны написать if/else для прохождения тестов. Использование тернарного оператора здесь не будет.
+
## Tests
```yml
tests:
- - text: MyComponent должен существовать и визуализироваться.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length === 1; })(), "MyComponent should exist and render.");'
- - text: 'Когда для display установлено значение true , необходимо displaydiv , button и h1 .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find("div").length === 1 && mockedComponent.find("div").children().length === 2 && mockedComponent.find("button").length === 1 && mockedComponent.find("h1").length === 1, "When display is set to true, a div, button, and h1 should render."); }; '
- - text: 'Если для display установлено значение « false , нужно отобразить только div и button .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find("div").length === 1 && mockedComponent.find("div").children().length === 1 && mockedComponent.find("button").length === 1 && mockedComponent.find("h1").length === 0, "When display is set to false, only a div and button should render."); }; '
- - text: Метод render должен использовать оператор if/else для проверки состояния this.state.display .
- testString: 'getUserInput => assert(getUserInput("index").includes("if") && getUserInput("index").includes("else"), "The render method should use an if/else statement to check the condition of this.state.display.");'
+ - text: MyComponent should exist and render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })());
+ - text: When display is set to true, a div, button, and h1 should render.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 2 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 1); }; '
+ - text: When display is set to false, only a div and button should render.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 1 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 0); }; '
+ - text: The render method should use an if/else statement to check the condition of this.state.display.
+ testString: getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else'));
```
@@ -66,12 +70,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.russian.md
index b6bea04b5e..6f71b70883 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d403616f
title: Review Using Props with Stateless Functional Components
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301411
localeTitle: Обзор использования реквизитов с функциональными компонентами без учета состояния
---
## Description
- За исключением последней задачи, вы передавали реквизиты функциональным компонентам без состояния. Эти компоненты действуют как чистые функции. Они принимают реквизит в качестве входных данных и возвращают одинаковое представление каждый раз, когда им передают одни и те же реквизиты. Вы можете задаться вопросом, что такое состояние, и следующая задача будет охватывать его более подробно. Перед этим рассмотрим терминологию для компонентов. Функциональным компонентом без состояния является любая функция, которую вы пишете, которая принимает реквизит и возвращает JSX. С другой стороны, компонент без гражданства представляет собой класс, который расширяет React.Component , но не использует внутреннее состояние (рассматривается в следующей задаче). Наконец, компонент с состоянием - это любой компонент, который поддерживает собственное внутреннее состояние. Вы можете видеть компоненты состояния, называемые просто компонентами или компонентами React. Общим примером является попытка свести к минимуму состояние работоспособности и, когда это возможно, создавать функциональные компоненты без состояния. Это помогает содержать управление вашим персоналом в определенной области вашего приложения. В свою очередь, это улучшает разработку и обслуживание вашего приложения, упрощая отслеживание того, как изменения состояния влияют на его поведение.
+
+За исключением последней задачи, вы передавали реквизиты функциональным компонентам без состояния. Эти компоненты действуют как чистые функции. Они принимают реквизит в качестве входных данных и возвращают одинаковое представление каждый раз, когда им передают одни и те же реквизиты. Вы можете задаться вопросом, что такое состояние, и следующая задача будет охватывать его более подробно. Перед этим рассмотрим терминологию для компонентов. Функциональным компонентом без состояния является любая функция, которую вы пишете, которая принимает реквизит и возвращает JSX. С другой стороны, компонент без гражданства представляет собой класс, который расширяет React.Component , но не использует внутреннее состояние (рассматривается в следующей задаче). Наконец, компонент с состоянием - это любой компонент, который поддерживает собственное внутреннее состояние. Вы можете видеть компоненты состояния, называемые просто компонентами или компонентами React. Общим примером является попытка свести к минимуму состояние работоспособности и, когда это возможно, создавать функциональные компоненты без состояния. Это помогает содержать управление вашим персоналом в определенной области вашего приложения. В свою очередь, это улучшает разработку и обслуживание вашего приложения, упрощая отслеживание того, как изменения состояния влияют на его поведение.
+
## Instructions
- Редактор кода имеет компонент CampSite который отображает компонент Camper как дочерний. Определите компонент Camper и назначьте его реквизиты по умолчанию { name: 'CamperBot' } . Внутри компонента Camper визуализируйте любой код, который вы хотите, но убедитесь, что у него есть один элемент p который включает только name , которое передается в качестве prop . Наконец, определите propTypes на компоненте Camper чтобы потребовать, чтобы name было предоставлено в качестве опоры и убедитесь, что оно имеет string типа.
+
+Редактор кода имеет компонент CampSite который отображает компонент Camper как дочерний. Определите компонент Camper и назначьте его реквизиты по умолчанию { name: 'CamperBot' } . Внутри компонента Camper визуализируйте любой код, который вы хотите, но убедитесь, что у него есть один элемент p который включает только name , которое передается в качестве prop . Наконец, определите propTypes на компоненте Camper чтобы потребовать, чтобы name было предоставлено в качестве опоры и убедитесь, что оно имеет string типа.
+
## Tests
```yml
tests:
- - text: Компонент CampSite должен отображать.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("CampSite").length === 1; })(), "The CampSite component should render.");'
- - text: Компонент Camper должен отображать.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("Camper").length === 1; })(), "The Camper component should render.");'
- - text: 'Компонент Camper должен включать реквизиты по умолчанию, которые присваивают строке CamperBotname ключа.'
- testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g, ""); const verify1 = "Camper.defaultProps={name:\"CamperBot\"}"; const verify2 = "Camper.defaultProps={name:"CamperBot"}"; return (noWhiteSpace.includes(verify1) || noWhiteSpace.includes(verify2)); })(), "The Camper component should include default props which assign the string CamperBot to the key name.");'
- - text: 'Компонент Camper должен включать типы prop, которые требуют, чтобы name prop имело тип string .'
- testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); const noWhiteSpace = getUserInput("index").replace(/\s/g, ""); const verifyDefaultProps = "Camper.propTypes={name:PropTypes.string.isRequired}"; return noWhiteSpace.includes(verifyDefaultProps); })(), "The Camper component should include prop types which require the name prop to be of type string.");'
- - text: Компонент Camper должен содержать элемент p только с текстом из name prop.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("p").text() === mockedComponent.find("Camper").props().name; })(), "The Camper component should contain a p element with only the text from the name prop.");'
+ - text: The CampSite component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('CampSite').length === 1; })());
+ - text: The Camper component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('Camper').length === 1; })());
+ - text: The Camper component should include default props which assign the string CamperBot to the key name.
+ testString: assert(/Camper.defaultProps={name:(['"`])CamperBot\1,?}/.test(code.replace(/\s/g, '')));
+ - text: The Camper component should include prop types which require the name prop to be of type string.
+ testString: assert(/Camper.propTypes={name:PropTypes.string.isRequired,?}/.test(code.replace(/\s/g, '')));
+ - text: The Camper component should contain a p element with only the text from the name prop.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('p').text() === mockedComponent.find('Camper').props().name; })());
```
@@ -57,7 +61,7 @@ class CampSite extends React.Component {
-### Before Test
+### Before Tests
```jsx
@@ -69,11 +73,12 @@ var PropTypes = {
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+};
+
+Camper.propTypes = {
+ name: PropTypes.string.isRequired
+};
+
+Camper.defaultProps = {
+ name: 'CamperBot'
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/set-state-with-this.setstate.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/set-state-with-this.setstate.russian.md
index 328a04486a..f2a9ffddfa 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/set-state-with-this.setstate.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/set-state-with-this.setstate.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036173
title: Set State with this.setState
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301412
localeTitle: Установить состояние с this.setState
---
## Description
- Предыдущие проблемы охватывали state компонента и как инициализировать состояние в constructor . Существует также способ изменения компоненты state . React предоставляет способ обновления state компонента, называемого setState . Вы вызываете метод setState в своем классе компонентов следующим образом: this.setState() , передавая объект с парами ключ-значение. Ключами являются ваши свойства состояния, а значения - это обновленные данные состояния. Например, если мы сохраняем username в состоянии и хотим его обновить, он будет выглядеть так:
this.setState ({ имя пользователя: 'Lewis' });
React ожидает, что вы никогда не измените state напрямую, вместо этого всегда используйте this.setState() когда происходят изменения состояния. Кроме того, вы должны отметить, что React может выполнять несколько обновлений состояния, чтобы повысить производительность. Это означает, что обновления состояния через метод setState могут быть асинхронными. Существует альтернативный синтаксис метода setState который обеспечивает способ решения этой проблемы. Это редко необходимо, но хорошо помнить об этом! Для получения дополнительной информации обратитесь к документации React .
+
+Предыдущие проблемы охватывали state компонента и как инициализировать состояние в constructor . Существует также способ изменения компоненты state . React предоставляет способ обновления state компонента, называемого setState . Вы вызываете метод setState в своем классе компонентов следующим образом: this.setState() , передавая объект с парами ключ-значение. Ключами являются ваши свойства состояния, а значения - это обновленные данные состояния. Например, если мы сохраняем username в состоянии и хотим его обновить, он будет выглядеть так:
this.setState ({ имя пользователя: 'Lewis' });
React ожидает, что вы никогда не измените state напрямую, вместо этого всегда используйте this.setState() когда происходят изменения состояния. Кроме того, вы должны отметить, что React может выполнять несколько обновлений состояния, чтобы повысить производительность. Это означает, что обновления состояния через метод setState могут быть асинхронными. Существует альтернативный синтаксис метода setState который обеспечивает способ решения этой проблемы. Это редко необходимо, но хорошо помнить об этом! Для получения дополнительной информации обратитесь к документации React .
+
## Instructions
- В редакторе кода есть элемент button который имеет обработчик onClick() . Этот обработчик запускается, когда button получает событие click в браузере и запускает метод handleClick определенный в MyComponent . В методе handleClick обновите state компонента, используя this.setState() . Задайте свойство name в state равным строке React Rocks! , Нажмите кнопку и просмотрите обновленное состояние. Не беспокойтесь, если вы не совсем понимаете, как работает код обработчика кликов. Это связано с предстоящими проблемами.
+
+В редакторе кода есть элемент button который имеет обработчик onClick() . Этот обработчик запускается, когда button получает событие click в браузере и запускает метод handleClick определенный в MyComponent . В методе handleClick обновите state компонента, используя this.setState() . Задайте свойство name в state равным строке React Rocks! , Нажмите кнопку и просмотрите обновленное состояние. Не беспокойтесь, если вы не совсем понимаете, как работает код обработчика кликов. Это связано с предстоящими проблемами.
+
## Tests
```yml
tests:
- - text: 'Состояние MyComponent должно инициализироваться с помощью пары значений ключа { name: Initial State } .'
- testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "Initial State", "The state of MyComponent should initialize with the key value pair { name: Initial State }.");'
- - text: MyComponent должен отображать заголовок h1 .
- testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("h1").length === 1, "MyComponent should render an h1 header.");'
- - text: 'Представленный h1 заголовок должен содержать текст, отображаемый из состояния компонента.'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/
TestName<\/h1>/.test(firstValue), "The rendered h1 header should contain text rendered from the component's state."); };'
- - text: 'Вызов метода handleClick на MyComponent должен установить свойство name в состоянии равным React Rocks! ,'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "Before" }); return waitForIt(() => mockedComponent.state("name")); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state("name")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === "Before" && secondValue === "React Rocks!", "Calling the handleClick method on MyComponent should set the name property in state to equal React Rocks!."); };'
+ - text: 'The state of MyComponent should initialize with the key value pair { name: Initial State }.'
+ testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'Initial State');
+ - text: MyComponent should render an h1 header.
+ testString: assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
+ - text: The rendered h1 header should contain text rendered from the component's state.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/
TestName<\/h1>/.test(firstValue)); };'
+ - text: Calling the handleClick method on MyComponent should set the name property in state to equal React Rocks!.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''Before'' }); return waitForIt(() => mockedComponent.state(''name'')); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state(''name'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === ''Before'' && secondValue === ''React Rocks!''); };'
```
@@ -64,12 +68,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use--for-a-more-concise-conditional.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use--for-a-more-concise-conditional.russian.md
index b535da2412..28da1b9a80 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use--for-a-more-concise-conditional.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use--for-a-more-concise-conditional.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036185
title: Use && for a More Concise Conditional
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301413
localeTitle: Используйте && для более сжатого условного
---
## Description
- Операторы if / else работали в последнем вызове, но есть более сжатый способ добиться того же результата. Представьте, что вы отслеживаете несколько условий в компоненте и хотите, чтобы различные элементы отображались в зависимости от каждого из этих условий. Если вы напишете много else if инструкции возвращают несколько разные пользовательские интерфейсы, вы можете повторить код, который оставляет место для ошибки. Вместо этого вы можете использовать && логический оператор для выполнения условной логики более кратким образом. Это возможно, потому что вы хотите проверить, является ли условие true , а если оно есть, верните некоторую разметку. Вот пример: {condition && <p>markup</p>} Если conditiontrue , разметка будет возвращена. Если условие false , операция немедленно вернет значение false после оценки condition и ничего не вернет. Вы можете включить эти утверждения непосредственно в свои JSX и несколько разных условий вместе, написав && после каждого из них. Это позволяет обрабатывать более сложную условную логику в методе render() не повторяя много кода.
+
+Операторы if / else работали в последнем вызове, но есть более сжатый способ добиться того же результата. Представьте, что вы отслеживаете несколько условий в компоненте и хотите, чтобы различные элементы отображались в зависимости от каждого из этих условий. Если вы напишете много else if инструкции возвращают несколько разные пользовательские интерфейсы, вы можете повторить код, который оставляет место для ошибки. Вместо этого вы можете использовать && логический оператор для выполнения условной логики более кратким образом. Это возможно, потому что вы хотите проверить, является ли условие true , а если оно есть, верните некоторую разметку. Вот пример: {condition && <p>markup</p>} Если conditiontrue , разметка будет возвращена. Если условие false , операция немедленно вернет значение false после оценки condition и ничего не вернет. Вы можете включить эти утверждения непосредственно в свои JSX и несколько разных условий вместе, написав && после каждого из них. Это позволяет обрабатывать более сложную условную логику в методе render() не повторяя много кода.
+
## Instructions
- Решить предыдущий пример еще раз, так что h1 оказывает только если display является true , но использовать && логический оператор вместо if/else заявление.
+
+Решить предыдущий пример еще раз, так что h1 оказывает только если display является true , но использовать && логический оператор вместо if/else заявление.
+
## Tests
```yml
tests:
- - text: MyComponent должен существовать и визуализироваться.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("MyComponent").length; })(), "MyComponent should exist and render.");'
- - text: 'Когда для display установлено значение true , необходимо displaydiv , button и h1 .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find("div").length === 1 && updated.find("div").children().length === 2 && updated.find("button").length === 1 && updated.find("h1").length === 1, "When display is set to true, a div, button, and h1 should render."); }; '
- - text: 'Если для display установлено значение « false , нужно отобразить только div и button .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find("div").length === 1 && updated.find("div").children().length === 1 && updated.find("button").length === 1 && updated.find("h1").length === 0, "When display is set to false, only a div and button should render."); }; '
- - text: Метод render должен использовать && логический оператор для проверки состояния this.state.display.
- testString: 'getUserInput => assert(getUserInput("index").includes("&&"), "The render method should use the && logical operator to check the condition of this.state.display.");'
+ - text: MyComponent should exist and render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length; })());
+ - text: When display is set to true, a div, button, and h1 should render.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find(''div'').length === 1 && updated.find(''div'').children().length === 2 && updated.find(''button'').length === 1 && updated.find(''h1'').length === 1); }; '
+ - text: When display is set to false, only a div and button should render.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find(''div'').length === 1 && updated.find(''div'').children().length === 1 && updated.find(''button'').length === 1 && updated.find(''h1'').length === 0); }; '
+ - text: The render method should use the && logical operator to check the condition of this.state.display.
+ testString: getUserInput => assert(getUserInput('index').includes('&&'));
```
@@ -65,12 +69,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.russian.md
index 04ea4df07f..c853f13d79 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.russian.md
@@ -3,35 +3,40 @@ id: 5a24c314108439a4d4036187
title: Use a Ternary Expression for Conditional Rendering
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301414
localeTitle: Использование терминологического выражения для условного рендеринга
---
## Description
- Прежде чем перейти к динамическим методам рендеринга, есть последний способ использовать встроенные условия JavaScript для рендеринга того, что вы хотите: трехмерный оператор . Тернарный оператор часто используется как ярлык для операторов if/else в JavaScript. Они не настолько устойчивы, как традиционные инструкции if/else , но они очень популярны среди разработчиков React. Одна из причин этого заключается в том, что JSX скомпилирован, if/else инструкции не могут быть вставлены непосредственно в код JSX. Возможно, вы заметили это несколько проблем назад - когда требовался оператор if/else , он всегда находился за пределами оператора return . Тернарные выражения могут быть отличной альтернативой, если вы хотите реализовать условную логику в своем JSX. Напомним, что тройной оператор состоит из трех частей, но вы можете комбинировать несколько тройных выражений. Вот основной синтаксис:
состояние ? выражениеIfTrue: выражениеIfFalse
+
+Прежде чем перейти к динамическим методам рендеринга, есть последний способ использовать встроенные условия JavaScript для рендеринга того, что вы хотите: трехмерный оператор . Тернарный оператор часто используется как ярлык для операторов if/else в JavaScript. Они не настолько устойчивы, как традиционные инструкции if/else , но они очень популярны среди разработчиков React. Одна из причин этого заключается в том, что JSX скомпилирован, if/else инструкции не могут быть вставлены непосредственно в код JSX. Возможно, вы заметили это несколько проблем назад - когда требовался оператор if/else , он всегда находился за пределами оператора return . Тернарные выражения могут быть отличной альтернативой, если вы хотите реализовать условную логику в своем JSX. Напомним, что тройной оператор состоит из трех частей, но вы можете комбинировать несколько тройных выражений. Вот основной синтаксис:
состояние ? выражениеIfTrue: выражениеIfFalse
+
## Instructions
-undefined
+
+The code editor has three constants defined within the CheckUserAge component's render() method. They are called buttonOne, buttonTwo, and buttonThree. Each of these is assigned a simple JSX expression representing a button element. First, initialize the state of CheckUserAge with input and userAge both set to values of an empty string.
+Once the component is rendering information to the page, users should have a way to interact with it. Within the component's return statement, set up a ternary expression that implements the following logic: when the page first loads, render the submit button, buttonOne, to the page. Then, when a user enters their age and clicks the button, render a different button based on the age. If a user enters a number less than 18, render buttonThree. If a user enters a number greater than or equal to 18, render buttonTwo.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("input").length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find("div").find("button").length === 1, "The CheckUserAge component should render with a single input element and a single button element.");'
- - text: ''
- testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === "" && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === "", "The CheckUserAge component's state should be initialized with a property of userAge and a property of input, both set to a value of an empty string.");'
- - text: 'Когда компонент CheckUserAge сначала отображается в DOM, внутренний текст button должен быть Submit.'
- testString: 'assert(Enzyme.mount(React.createElement(CheckUserAge)).find("button").text() === "Submit", "When the CheckUserAge component is first rendered to the DOM, the button's inner text should be Submit.");'
- - text: 'Когда во input элемент вводится число менее 18, и button нажата, внутренний текст button должен быть прочитан « You Shall Not Pass .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter3AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "3" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter17AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "17" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === "Submit" && userAge3 === "You Shall Not Pass" && userAge17 === "You Shall Not Pass", "When a number of less than 18 is entered into the input element and the button is clicked, the button's inner text should read You Shall Not Pass."); }; '
- - text: 'Когда число больше или равно 18, вводится в input элемент и button нажата, то button «s внутренний текст должен прочитать You May Enter .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find("button").text(); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter35AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "35" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === "Submit" && userAge18 === "You May Enter" && userAge35 === "You May Enter", "When a number greater than or equal to 18 is entered into the input element and the button is clicked, the button's inner text should read You May Enter."); }; '
- - text: 'Как только число будет отправлено, и значение input снова будет изменено, button должна вернуться к чтению Submit .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "18" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "5" }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const enter10AndClickButton = () => { mockedComponent.find("input").simulate("change", {target: { value: "10" }}); mockedComponent.find("button").simulate("click"); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find("button").text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === "You May Enter" && changeInput1 === "Submit" && userAge10 === "You Shall Not Pass" && changeInput2 === "Submit", "Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit."); }; '
- - text: В вашем коде не должно быть никаких операторов if/else .
- testString: 'assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, "Your code should not contain any if/else statements.");'
+ - text: The CheckUserAge component should render with a single input element and a single button element.
+ testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input').length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button').length === 1);
+ - text: The CheckUserAge component's state should be initialized with a property of userAge and a property of input, both set to a value of an empty string.
+ testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === '');
+ - text: When the CheckUserAge component is first rendered to the DOM, the button's inner text should be Submit.
+ testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() === 'Submit');
+ - text: When a number of less than 18 is entered into the input element and the button is clicked, the button's inner text should read You Shall Not Pass.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter3AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''3'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''17'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === ''Submit'' && userAge3 === ''You Shall Not Pass'' && userAge17 === ''You Shall Not Pass''); }; '
+ - text: When a number greater than or equal to 18 is entered into the input element and the button is clicked, the button's inner text should read You May Enter.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''35'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === ''Submit'' && userAge18 === ''You May Enter'' && userAge35 === ''You May Enter''); }; '
+ - text: Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''5'' }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''10'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === ''You May Enter'' && changeInput1 === ''Submit'' && userAge10 === ''You Shall Not Pass'' && changeInput2 === ''Submit''); }; '
+ - text: Your code should not contain any if/else statements.
+ testString: assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false);
```
@@ -60,7 +65,7 @@ class CheckUserAge extends React.Component {
handleChange(e) {
this.setState({
input: e.target.value,
- userAge: "
+ userAge: ''
});
}
submit() {
@@ -92,12 +97,12 @@ class CheckUserAge extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.russian.md
index 32583aea26..06c23a9cce 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.russian.md
@@ -3,33 +3,37 @@ id: 5a24c314108439a4d4036183
title: Use Advanced JavaScript in React Render Method
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301415
localeTitle: Использовать расширенный JavaScript в методе React Render
---
## Description
- В предыдущих задачах вы узнали, как вводить код JavaScript в код JSX, используя фигурные скобки, { } , для таких задач, как доступ к реквизитам, передача реквизитов, доступ к состоянию, вставка комментариев в ваш код и, в последнее время, дизайн ваших компонентов. Это все распространенные случаи использования JavaScript в JSX, но это не единственный способ использования кода JavaScript в компонентах React. Вы также можете писать JavaScript непосредственно в своих методах render перед оператором return , не вставляя его внутри фигурных скобок. Это связано с тем, что он еще не находится в коде JSX. Если вы хотите использовать переменную позже в коде JSX внутри оператора return , вы поместите имя переменной внутри фигурных скобок.
+
+В предыдущих задачах вы узнали, как вводить код JavaScript в код JSX, используя фигурные скобки, { } , для таких задач, как доступ к реквизитам, передача реквизитов, доступ к состоянию, вставка комментариев в ваш код и, в последнее время, дизайн ваших компонентов. Это все распространенные случаи использования JavaScript в JSX, но это не единственный способ использования кода JavaScript в компонентах React. Вы также можете писать JavaScript непосредственно в своих методах render перед оператором return , не вставляя его внутри фигурных скобок. Это связано с тем, что он еще не находится в коде JSX. Если вы хотите использовать переменную позже в коде JSX внутри оператора return , вы поместите имя переменной внутри фигурных скобок.
+
## Instructions
-undefined
+
+In the code provided, the render method has an array that contains 20 phrases to represent the answers found in the classic 1980's Magic Eight Ball toy. The button click event is bound to the ask method, so each time the button is clicked a random number will be generated and stored as the randomIndex in state. On line 52, delete the string "change me!" and reassign the answer const so your code randomly accesses a different index of the possibleAnswers array each time the component updates. Finally, insert the answer const inside the p tags.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find("MagicEightBall").length, 1, "The MagicEightBall component should exist and should render to the page.");'
- - text: ''
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), "input", "MagicEightBall's first child should be an input element.");'
- - text: ''
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), "button", "MagicEightBall's third child should be a button element.");'
- - text: ''
- testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).state("randomIndex") === "" && Enzyme.mount(React.createElement(MagicEightBall)).state("userInput") === "", "MagicEightBall's state should be initialized with a property of userInput and a property of randomIndex both set to a value of an empty string.");'
- - text: ''
- testString: 'assert(Enzyme.mount(React.createElement(MagicEightBall)).find("p").length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find("p").text() === "", "When MagicEightBall is first mounted to the DOM, it should return an empty p element.");'
- - text: ''
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find("input").simulate("change", { target: { value: "test?" }}); comp.find("button").simulate("click"); }; const result = () => comp.find("p").text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, "When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.");}'
+ - text: The MagicEightBall component should exist and should render to the page.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall').length, 1);
+ - text: MagicEightBall's first child should be an input element.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), 'input');
+ - text: MagicEightBall's third child should be a button element.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button');
+ - text: MagicEightBall's state should be initialized with a property of userInput and a property of randomIndex both set to a value of an empty string.
+ testString: assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === '');
+ - text: When MagicEightBall is first mounted to the DOM, it should return an empty p element.
+ testString: assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '');
+ - text: When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find(''input'').simulate(''change'', { target: { value: ''test?'' }}); comp.find(''button'').simulate(''click''); }; const result = () => comp.find(''p'').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10);}'
```
@@ -50,8 +54,8 @@ class MagicEightBall extends React.Component {
constructor(props) {
super(props);
this.state = {
- userInput: ",
- randomIndex: "
+ userInput: '',
+ randomIndex: ''
}
this.ask = this.ask.bind(this);
this.handleChange = this.handleChange.bind(this);
@@ -60,7 +64,7 @@ class MagicEightBall extends React.Component {
if (this.state.userInput) {
this.setState({
randomIndex: Math.floor(Math.random() * 20),
- userInput: "
+ userInput: ''
});
}
}
@@ -118,12 +122,13 @@ class MagicEightBall extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+var possibleAnswers = [ 'It is certain', 'It is decidedly so', 'Without a doubt', 'Yes, definitely', 'You may rely on it', 'As I see it, yes', 'Outlook good', 'Yes', 'Signs point to yes', 'Reply hazy try again', 'Ask again later', 'Better not tell you now', 'Cannot predict now', 'Concentrate and ask again', 'Don\'t count on it', 'My reply is no', 'My sources say no', 'Outlook not so good','Very doubtful', 'Most likely' ];
+ReactDOM.render(, document.getElementById('root'))
+
```
@@ -133,7 +138,61 @@ console.info('after the test');
## Solution
-```js
-// solution required
+```jsx
+const inputStyle = {
+ width: 235,
+ margin: 5
+}
+
+class MagicEightBall extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ userInput: '',
+ randomIndex: ''
+ }
+ this.ask = this.ask.bind(this);
+ this.handleChange = this.handleChange.bind(this);
+ }
+ ask() {
+ if (this.state.userInput) {
+ this.setState({
+ randomIndex: Math.floor(Math.random() * 20),
+ userInput: ''
+ });
+ }
+ }
+ handleChange(event) {
+ this.setState({
+ userInput: event.target.value
+ });
+ }
+ render() {
+ const possibleAnswers = [
+ "It is certain", "It is decidedly so", "Without a doubt",
+ "Yes, definitely", "You may rely on it", "As I see it, yes",
+ "Outlook good", "Yes", "Signs point to yes", "Reply hazy try again",
+ "Ask again later", "Better not tell you now", "Cannot predict now",
+ "Concentrate and ask again", "Don't count on it", "My reply is no",
+ "My sources say no", "Outlook not so good","Very doubtful", "Most likely"
+ ];
+ const answer = possibleAnswers[this.state.randomIndex];
+ return (
+
+
+
+
Answer:
+
+ {answer}
+
+
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.russian.md
index f637525cde..7a1a265fdb 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d403618c
title: Use Array.filter() to Dynamically Filter an Array
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301416
localeTitle: Используйте Array.filter () для динамического фильтра массива
---
## Description
- Метод массива map - это мощный инструмент, который вы часто будете использовать при работе с React. Другой метод, связанный с map - это filter , который фильтрует содержимое массива на основе условия, а затем возвращает новый массив. Например, если у вас есть массив пользователей, у всех есть свойство online которое может быть установлено как true или false , вы можете фильтровать только тех пользователей, которые находятся в сети, написав: let onlineUsers = users.filter(user => user.online);
+
+Метод массива map - это мощный инструмент, который вы часто будете использовать при работе с React. Другой метод, связанный с map - это filter , который фильтрует содержимое массива на основе условия, а затем возвращает новый массив. Например, если у вас есть массив пользователей, у всех есть свойство online которое может быть установлено как true или false , вы можете фильтровать только тех пользователей, которые находятся в сети, написав: let onlineUsers = users.filter(user => user.online);
+
## Instructions
- В редакторе кода, MyComponent «s state инициализируется массив пользователей. Некоторые пользователи подключены к сети, а некоторые нет. Отфильтруйте массив, чтобы вы видели только пользователей, которые находятся в сети. Для этого сначала используйте filter чтобы вернуть новый массив, содержащий только пользователей, чье online свойство true . Затем в переменной renderOnline сопоставьте фильтрованный массив и верните элемент li для каждого пользователя, который содержит текст своего username . Обязательно включите и уникальный key , как в последние задачи.
+
+В редакторе кода, MyComponent «s state инициализируется массив пользователей. Некоторые пользователи подключены к сети, а некоторые нет. Отфильтруйте массив, чтобы вы видели только пользователей, которые находятся в сети. Для этого сначала используйте filter чтобы вернуть новый массив, содержащий только пользователей, чье online свойство true . Затем в переменной renderOnline сопоставьте фильтрованный массив и верните элемент li для каждого пользователя, который содержит текст своего username . Обязательно включите и уникальный key , как в последние задачи.
+
## Tests
```yml
tests:
- - text: MyComponent должен существовать и отображать страницу.
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find("MyComponent").length, 1, "MyComponent should exist and render to the page.");'
- - text: MyComponent должно быть инициализировано массивом из шести пользователей. ")
- testString: 'assert(Array.isArray(Enzyme.mount(React.createElement(MyComponent)).state("users")) === true && Enzyme.mount(React.createElement(MyComponent)).state("users").length === 6, "MyComponent's state should be initialized to an array of six users.");'
- - text: 'MyComponent должен возвращать div , h1 , а затем неупорядоченный список, содержащий элементы li для каждого пользователя, статус онлайн которого равен true .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: "Jeff", online: bool }, { username: "Alan", online: bool }, { username: "Mary", online: bool }, { username: "Jim", online: bool }, { username: "Laura", online: bool } ]}); const result = () => comp.find("li").length; const _1 = result(); const _2 = () => { comp.setState(users(true)); return waitForIt(() => result()) }; const _3 = () => { comp.setState(users(false)); return waitForIt(() => result()) }; const _4 = () => { comp.setState({ users: [] }); return waitForIt(() => result()) }; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); assert(comp.find("div").length === 1 && comp.find("h1").length === 1 && comp.find("ul").length === 1 && _1 === 4 && _2_val === 5 && _3_val === 0 && _4_val === 0, "MyComponent should return a div, an h1, and then an unordered list containing li elements for every user whose online status is set to true."); }; '
- - text: MyComponent должен отображать элементы li которые содержат имя пользователя каждого онлайн-пользователя.
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: "Jeff", online: bool }, { username: "Alan", online: bool }, { username: "Mary", online: bool }, { username: "Jim", online: bool }, { username: "Laura", online: bool } ]}); const ul = () => { comp.setState(users(true)); return waitForIt(() => comp.find("ul").html()) }; const html = await ul(); assert(html === "
Jeff
Alan
Mary
Jim
Laura
", "MyComponent should render li elements that contain the username of each online user."); }; '
- - text: Каждый элемент элемента списка должен иметь уникальный key атрибут.
- testString: 'assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find("ul"); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })(), "Each list item element should have a unique key attribute.");'
+ - text: MyComponent should exist and render to the page.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length, 1);
+ - text: MyComponent's state should be initialized to an array of six users.")
+ testString: assert(Array.isArray(Enzyme.mount(React.createElement(MyComponent)).state('users')) === true && Enzyme.mount(React.createElement(MyComponent)).state('users').length === 6);
+ - text: MyComponent should return a div, an h1, and then an unordered list containing li elements for every user whose online status is set to true.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: ''Jeff'', online: bool }, { username: ''Alan'', online: bool }, { username: ''Mary'', online: bool }, { username: ''Jim'', online: bool }, { username: ''Laura'', online: bool } ]}); const result = () => comp.find(''li'').length; const _1 = result(); const _2 = () => { comp.setState(users(true)); return waitForIt(() => result()) }; const _3 = () => { comp.setState(users(false)); return waitForIt(() => result()) }; const _4 = () => { comp.setState({ users: [] }); return waitForIt(() => result()) }; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); assert(comp.find(''div'').length === 1 && comp.find(''h1'').length === 1 && comp.find(''ul'').length === 1 && _1 === 4 && _2_val === 5 && _3_val === 0 && _4_val === 0); }; '
+ - text: MyComponent should render li elements that contain the username of each online user.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: ''Jeff'', online: bool }, { username: ''Alan'', online: bool }, { username: ''Mary'', online: bool }, { username: ''Jim'', online: bool }, { username: ''Laura'', online: bool } ]}); const ul = () => { comp.setState(users(true)); return waitForIt(() => comp.find(''ul'').html()) }; const html = await ul(); assert(html === ''
Jeff
Alan
Mary
Jim
Laura
''); }; '
+ - text: Each list item element should have a unique key attribute.
+ testString: assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find('ul'); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })());
```
@@ -89,12 +93,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.russian.md
index f4f157ad66..b53f92dda6 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.russian.md
@@ -3,33 +3,37 @@ id: 5a24c314108439a4d403618a
title: Use Array.map() to Dynamically Render Elements
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301417
localeTitle: Используйте Array.map () для динамически визуализирующих элементов
---
## Description
- Условный рендеринг полезен, но вам могут понадобиться ваши компоненты для отображения неизвестного количества элементов. Часто в реактивном программировании программист не имеет никакого способа узнать, какое состояние приложения находится во время выполнения, потому что так много зависит от взаимодействия пользователя с этой программой. Программистам необходимо написать свой код для правильной обработки этого неизвестного состояния раньше времени. Использование Array.map() в React иллюстрирует это понятие. Например, вы создаете простое приложение «To Do List». Как программист, у вас нет способа узнать, сколько элементов пользователь может иметь в своем списке. Вам необходимо настроить компонент для динамического отображения правильного количества элементов списка задолго до того, как кто-то, использующий программу, решит, что сегодня день прачечной.
+
+Условный рендеринг полезен, но вам могут понадобиться ваши компоненты для отображения неизвестного количества элементов. Часто в реактивном программировании программист не имеет никакого способа узнать, какое состояние приложения находится во время выполнения, потому что так много зависит от взаимодействия пользователя с этой программой. Программистам необходимо написать свой код для правильной обработки этого неизвестного состояния раньше времени. Использование Array.map() в React иллюстрирует это понятие. Например, вы создаете простое приложение «To Do List». Как программист, у вас нет способа узнать, сколько элементов пользователь может иметь в своем списке. Вам необходимо настроить компонент для динамического отображения правильного количества элементов списка задолго до того, как кто-то, использующий программу, решит, что сегодня день прачечной.
+
## Instructions
- Редактор кода имеет большую часть компонента MyToDoList . Некоторые из этого кода должны выглядеть знакомыми, если вы завершили задачу контролируемой формы. Вы заметите textarea и button , а также несколько методов, которые отслеживают их состояния, но пока ничего не отображается на странице. Внутри constructor создайте объект this.state и определите два состояния: userInput должен быть инициализирован как пустая строка, а toDoList должен быть инициализирован как пустой массив. Затем удалите комментарий в методе render() рядом с переменной items . На своем месте, toDoList массив toDoList хранящийся во внутреннем состоянии компонента, и динамически визуализируйте li для каждого элемента. Попробуйте ввести строку eat, code, sleep, repeat в textarea , затем нажмите кнопку и посмотрите, что произойдет. Примечание. Возможно, вы знаете, что все дочерние элементы дочернего элемента, созданные с помощью операции сопоставления, такие как это, должны быть снабжены уникальным key атрибутом. Не беспокойтесь, это тема следующей задачи.
+
+Редактор кода имеет большую часть компонента MyToDoList . Некоторые из этого кода должны выглядеть знакомыми, если вы завершили задачу контролируемой формы. Вы заметите textarea и button , а также несколько методов, которые отслеживают их состояния, но пока ничего не отображается на странице. Внутри constructor создайте объект this.state и определите два состояния: userInput должен быть инициализирован как пустая строка, а toDoList должен быть инициализирован как пустой массив. Затем удалите комментарий в методе render() рядом с переменной items . На своем месте, toDoList массив toDoList хранящийся во внутреннем состоянии компонента, и динамически визуализируйте li для каждого элемента. Попробуйте ввести строку eat, code, sleep, repeat в textarea , затем нажмите кнопку и посмотрите, что произойдет. Примечание. Возможно, вы знаете, что все дочерние элементы дочернего элемента, созданные с помощью операции сопоставления, такие как это, должны быть снабжены уникальным key атрибутом. Не беспокойтесь, это тема следующей задачи.
+
## Tests
```yml
tests:
- - text: Компонент MyToDoList должен существовать и отображать страницу.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").length === 1; })(), "The MyToDoList component should exist and render to the page.");'
- - text: Первым дочерним элементом MyToDoList должен быть элемент textarea .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(0).type() === "textarea"; })(), "The first child of MyToDoList should be a textarea element.");'
- - text: Третий ребенок MyToDoList должен быть элементом button .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(2).type() === "button"; })(), "The third child of MyToDoList should be a button element.");'
- - text: Состояние MyToDoList должно быть инициализировано toDoList как пустой массив.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), "The state of MyToDoList should be initialized with toDoList as an empty array.");'
- - text: Состояние MyToDoList должно быть инициализировано с помощью userInput как пустая строка.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === "string" && initialState.userInput.length === 0; })(), "The state of MyToDoList should be initialized with userInput as an empty string.");'
- - text: 'При нажатии кнопки « Create List компонент MyToDoList должен динамически возвращать неупорядоченный список, содержащий элемент элемента списка для каждого элемента списка, разделенного запятыми, введенного в элемент textarea .'
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate("change", {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find("ul").find("li"))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find("textarea"), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find("button").simulate("click"))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find("ul").find("li"); return { nodes, text: nodes.reduce((t, n) => t + n.text(), "") }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find("textarea"), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find("button").simulate("click"))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find("ul").find("li"); return { nodes, text: nodes.reduce((t, n) => t + n.text(), "") }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === "testA testB testC" && awaited_state_3.text === "t1 t2 t3 t4 t5 t6", "When the Create List button is clicked, the MyToDoList component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the textarea element."); }; '
+ - text: The MyToDoList component should exist and render to the page.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').length === 1; })());
+ - text: The first child of MyToDoList should be a textarea element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(0).type() === 'textarea'; })());
+ - text: The third child of MyToDoList should be a button element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(2).type() === 'button'; })());
+ - text: The state of MyToDoList should be initialized with toDoList as an empty array.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })());
+ - text: The state of MyToDoList should be initialized with userInput as an empty string.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === 'string' && initialState.userInput.length === 0; })());
+ - text: When the Create List button is clicked, the MyToDoList component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the textarea element.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find(''ul'').find(''li''))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === ''testA testB testC'' && awaited_state_3.text === ''t1 t2 t3 t4 t5 t6''); }; '
```
@@ -89,12 +93,12 @@ class MyToDoList extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-default-props.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-default-props.russian.md
index 407841ce1b..a1dffad0c3 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-default-props.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-default-props.russian.md
@@ -3,25 +3,29 @@ id: 5a24c314108439a4d403616b
title: Use Default Props
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301418
localeTitle: Использовать опоры по умолчанию
---
## Description
- React также имеет возможность устанавливать реквизиты по умолчанию. Вы можете назначить реквизиты по умолчанию для компонента как свойства самого компонента, а React присваивает стандартную поддержку, если это необходимо. Это позволяет указать, какое значение должно иметь значение prop, если значение явно не указано. Например, если вы объявите MyComponent.defaultProps = { location: 'San Francisco' } , вы определили MyComponent.defaultProps = { location: 'San Francisco' } местоположения, которая установлена в строке San Francisco , если вы не указали иначе. React присваивает реквизиты по умолчанию, если реквизиты не определены, но если вы передадите null в качестве значения для prop, он останется null .
+
+React также имеет возможность устанавливать реквизиты по умолчанию. Вы можете назначить реквизиты по умолчанию для компонента как свойства самого компонента, а React присваивает стандартную поддержку, если это необходимо. Это позволяет указать, какое значение должно иметь значение prop, если значение явно не указано. Например, если вы объявите MyComponent.defaultProps = { location: 'San Francisco' } , вы определили MyComponent.defaultProps = { location: 'San Francisco' } местоположения, которая установлена в строке San Francisco , если вы не указали иначе. React присваивает реквизиты по умолчанию, если реквизиты не определены, но если вы передадите null в качестве значения для prop, он останется null .
+
## Instructions
- Редактор кода показывает компонент ShoppingCart . Определите реквизиты по умолчанию для этого компонента, которые указывают items со значением 0 .
+
+Редактор кода показывает компонент ShoppingCart . Определите реквизиты по умолчанию для этого компонента, которые указывают items со значением 0 .
+
## Tests
```yml
tests:
- - text: Компонент ShoppingCart должен отображать.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The ShoppingCart component should render.");'
- - text: 'Компонент ShoppingCart должен иметь опору по умолчанию { items: 0 } .'
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find("ShoppingCart").props().items === 0; })(), "The ShoppingCart component should have a default prop of { items: 0 }.");'
+ - text: The ShoppingCart component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })());
+ - text: 'The ShoppingCart component should have a default prop of { items: 0 }.'
+ testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find(''ShoppingCart'').props().items === 0; })());'
```
@@ -46,12 +50,12 @@ const ShoppingCart = (props) => {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ )
+};
+
+// change code below this line
+ShoppingCart.defaultProps = {
+ items: 0
+}
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.russian.md
index 3c50b2be70..f5a99123f2 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d403616d
title: Use PropTypes to Define the Props You Expect
challengeType: 6
isRequired: false
-videoUrl: ''
-localeTitle: 'Используйте PropTypes для определения реквизита, который вы ожидаете'
+forumTopicId: 301419
+localeTitle: Используйте PropTypes для определения реквизита, который вы ожидаете
---
## Description
- React предоставляет полезные функции проверки типов для проверки того, что компоненты получают реквизиты правильного типа. Например, ваше приложение вызывает вызов API для извлечения данных, которые вы ожидаете в массиве, который затем передается компоненту в качестве опоры. Вы можете установить propTypes на свой компонент, чтобы требовать, чтобы данные имели тип array . Это даст полезное предупреждение, когда данные относятся к любому другому типу. Рекомендуется использовать propTypes когда вы propTypes знаете тип пропеллера. Вы можете определить свойство propTypes для компонента так же, как вы определили defaultProps . При этом будет проверяться наличие реквизита данного ключа с заданным типом. Вот пример, требующий function типа для prop, называемого handleClick : MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } В приведенном выше PropTypes.func часть PropTypes.func проверяет, что handleClick является функцией. Добавление isRequired говорит React, что handleClick является обязательным свойством для этого компонента. Вы увидите предупреждение, если эта поддержка не указана. Также обратите внимание, что func представляет function . Среди семи простых примитивов JavaScript function и boolean (написанное как bool ) - это только два, которые используют необычную орфографию. В дополнение к примитивным типам доступны другие типы. Например, вы можете проверить, что опорный элемент является элементом React. Пожалуйста, обратитесь к документации по всем параметрам. Примечание. Начиная с версии React v15.5.0, PropTypes импортируется независимо от React, например: import React, { PropTypes } from 'react';
+
+React предоставляет полезные функции проверки типов для проверки того, что компоненты получают реквизиты правильного типа. Например, ваше приложение вызывает вызов API для извлечения данных, которые вы ожидаете в массиве, который затем передается компоненту в качестве опоры. Вы можете установить propTypes на свой компонент, чтобы требовать, чтобы данные имели тип array . Это даст полезное предупреждение, когда данные относятся к любому другому типу. Рекомендуется использовать propTypes когда вы propTypes знаете тип пропеллера. Вы можете определить свойство propTypes для компонента так же, как вы определили defaultProps . При этом будет проверяться наличие реквизита данного ключа с заданным типом. Вот пример, требующий function типа для prop, называемого handleClick : MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } В приведенном выше PropTypes.func часть PropTypes.func проверяет, что handleClick является функцией. Добавление isRequired говорит React, что handleClick является обязательным свойством для этого компонента. Вы увидите предупреждение, если эта поддержка не указана. Также обратите внимание, что func представляет function . Среди семи простых примитивов JavaScript function и boolean (написанное как bool ) - это только два, которые используют необычную орфографию. В дополнение к примитивным типам доступны другие типы. Например, вы можете проверить, что опорный элемент является элементом React. Пожалуйста, обратитесь к документации по всем параметрам. Примечание. Начиная с версии React v15.5.0, PropTypes импортируется независимо от React, например: import React, { PropTypes } from 'react';
+
## Instructions
- Определите propTypes для компонента Items чтобы потребовать quantity в качестве опоры и убедитесь, что он имеет number типа.
+
+Определите propTypes для компонента Items чтобы потребовать quantity в качестве опоры и убедитесь, что он имеет number типа.
+
## Tests
```yml
tests:
- - text: Компонент ShoppingCart должен отображать.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The ShoppingCart component should render.");'
- - text: Элемент Items должен отображать.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").length === 1; })(), "The Items component should render.");'
- - text: 'Компонент « Items должен включать проверку propTypes которая требует, чтобы quantity было number .'
- testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/ /g, ""); return noWhiteSpace.includes("quantity:PropTypes.number.isRequired") && noWhiteSpace.includes("Items.propTypes="); })(), "The Items component should include a propTypes check that requires quantity to be a number.");'
+ - text: The ShoppingCart component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })());
+ - text: The Items component should render.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })());
+ - text: The Items component should include a propTypes check that requires quantity to be a number.
+ testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/ /g, ''); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })());
```
@@ -60,7 +64,7 @@ class ShoppingCart extends React.Component {
-### Before Test
+### Before Tests
```jsx
@@ -72,11 +76,12 @@ var PropTypes = {
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
Current Quantity of Items in Cart: {props.quantity}
+};
+
+// change code below this line
+Items.propTypes = {
+ quantity: PropTypes.number.isRequired
+};
+// change code above this line
+
+Items.defaultProps = {
+ quantity: 0
+};
+
+class ShoppingCart extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-react-to-render-nested-components.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-react-to-render-nested-components.russian.md
index 4c22dba734..7b6dd6bbed 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-react-to-render-nested-components.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-react-to-render-nested-components.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036165
title: Use React to Render Nested Components
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301420
localeTitle: Использовать React для вставки вложенных компонентов
---
## Description
- Последняя задача показала простой способ составления двух компонентов, но есть много разных способов компоновки компонентов с помощью React. Компонентный состав является одной из мощных возможностей React. Когда вы работаете с React, важно начать думать о своем пользовательском интерфейсе с точки зрения таких компонентов, как пример приложения в последнем вызове. Вы разбиваете свой пользовательский интерфейс на свои основные строительные блоки, и эти части становятся компонентами. Это помогает отделить код, отвечающий за пользовательский интерфейс, от кода, ответственного за обработку вашей логики приложения. Это может значительно упростить разработку и сопровождение сложных проектов.
+
+Последняя задача показала простой способ составления двух компонентов, но есть много разных способов компоновки компонентов с помощью React. Компонентный состав является одной из мощных возможностей React. Когда вы работаете с React, важно начать думать о своем пользовательском интерфейсе с точки зрения таких компонентов, как пример приложения в последнем вызове. Вы разбиваете свой пользовательский интерфейс на свои основные строительные блоки, и эти части становятся компонентами. Это помогает отделить код, отвечающий за пользовательский интерфейс, от кода, ответственного за обработку вашей логики приложения. Это может значительно упростить разработку и сопровождение сложных проектов.
+
## Instructions
- В редакторе кода есть два функциональных компонента, называемых TypesOfFruit и Fruits . Возьмите TypesOfFruit компонент и компоновать его, или гнездо его, в пределах Fruits компонента. Затем возьмите компонент Fruits и TypesOfFood его в компонент TypesOfFood . Результатом должен быть дочерний компонент, вложенный в родительский компонент, который вложен в собственный родительский компонент!
+
+В редакторе кода есть два функциональных компонента, называемых TypesOfFruit и Fruits . Возьмите TypesOfFruit компонент и компоновать его, или гнездо его, в пределах Fruits компонента. Затем возьмите компонент Fruits и TypesOfFood его в компонент TypesOfFood . Результатом должен быть дочерний компонент, вложенный в родительский компонент, который вложен в собственный родительский компонент!
+
## Tests
```yml
tests:
- - text: Компонент TypesOfFood должен возвращать один элемент div .
- testString: 'assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === "div", "The TypesOfFood component should return a single div element.");'
- - text: Компонент TypesOfFood должен вернуть компонент Fruits .
- testString: 'assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === "Fruits", "The TypesOfFood component should return the Fruits component.");'
- - text: ''
- testString: 'assert(Enzyme.mount(React.createElement(TypesOfFood)).find("h2").html() === "
Fruits:
", "The Fruits component should return the TypesOfFruit component.");'
- - text: Компонент TypesOfFruit должен возвращать элементы h2 и ul .
- testString: 'assert(Enzyme.mount(React.createElement(TypesOfFood)).find("ul").text() === "ApplesBlueberriesStrawberriesBananas", "The TypesOfFruit component should return the h2 and ul elements.");'
+ - text: The TypesOfFood component should return a single div element.
+ testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div');
+ - text: The TypesOfFood component should return the Fruits component.
+ testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === 'Fruits');
+ - text: The Fruits component should return the TypesOfFruit component.
+ testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() === '
Fruits:
');
+ - text: The TypesOfFruit component should return the h2 and ul elements.
+ testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() === 'ApplesBlueberriesStrawberriesBananas');
```
@@ -82,12 +86,12 @@ class TypesOfFood extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ { /* change code below this line */ }
+
+ { /* change code above this line */ }
+
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-state-to-toggle-an-element.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-state-to-toggle-an-element.russian.md
index 7948d5ba07..47d1142b4d 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-state-to-toggle-an-element.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-state-to-toggle-an-element.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036176
title: Use State to Toggle an Element
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301421
localeTitle: Использовать состояние для переключения элемента
---
## Description
- Вы можете использовать state в приложениях React более сложными способами, чем то, что вы видели до сих пор. Один пример - контролировать состояние значения, а затем визуализировать пользовательский интерфейс на основе этого значения. Существует несколько способов сделать это, и редактор кода показывает один метод.
+
+Вы можете использовать state в приложениях React более сложными способами, чем то, что вы видели до сих пор. Один пример - контролировать состояние значения, а затем визуализировать пользовательский интерфейс на основе этого значения. Существует несколько способов сделать это, и редактор кода показывает один метод.
+
## Instructions
-MyComponent имеет свойство visibility которое инициализируется значением false . Метод рендеринга возвращает один вид, если значение visibility истинно, и другое представление, если оно ложно. В настоящее время не существует никакого способа обновления visibility собственности в компоненте state . Значение должно переключаться между истиной и ложью. На кнопке есть обработчик клика, который запускает метод класса, называемый toggleVisibility() . Определите этот метод, чтобы statevisibility переключилось в противоположное значение при вызове метода. Если visibilityfalse , метод устанавливает значение true и наоборот. Наконец, нажмите кнопку, чтобы увидеть условный рендеринг компонента на основе его state . Подсказка: не забудьте связать this ключевое слово с методом в конструкторе!
+
+MyComponent имеет свойство visibility которое инициализируется значением false . Метод рендеринга возвращает один вид, если значение visibility истинно, и другое представление, если оно ложно. В настоящее время не существует никакого способа обновления visibility собственности в компоненте state . Значение должно переключаться между истиной и ложью. На кнопке есть обработчик клика, который запускает метод класса, называемый toggleVisibility() . Определите этот метод, чтобы statevisibility переключилось в противоположное значение при вызове метода. Если visibilityfalse , метод устанавливает значение true и наоборот. Наконец, нажмите кнопку, чтобы увидеть условный рендеринг компонента на основе его state . Подсказка: не забудьте связать this ключевое слово с методом в конструкторе!
+
## Tests
```yml
tests:
- - text: MyComponent должен вернуть элемент div содержащий button .
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find("div").find("button").length, 1, "MyComponent should return a div element which contains a button.");'
- - text: Состояние MyComponent должно инициализироваться с использованием свойства visibilityMyComponentfalse .
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state("visibility"), false, "The state of MyComponent should initialize with a visibility property set to false.");'
- - text: Нажатие на элемент кнопки должно переключать свойство visibility в состоянии между true и false .
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ visibility: false }); return waitForIt(() => mockedComponent.state("visibility")); }; const second = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("visibility")); }; const third = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("visibility")); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(!firstValue && secondValue && !thirdValue, "Clicking the button element should toggle the visibility property in state between true and false."); }; '
+ - text: MyComponent should return a div element which contains a button.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('div').find('button').length, 1);
+ - text: The state of MyComponent should initialize with a visibility property set to false.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state('visibility'), false);
+ - text: Clicking the button element should toggle the visibility property in state between true and false.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ visibility: false }); return waitForIt(() => mockedComponent.state(''visibility'')); }; const second = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''visibility'')); }; const third = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''visibility'')); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(!firstValue && secondValue && !thirdValue); }; '
```
@@ -70,12 +74,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.russian.md
index fa63769436..5dbcd93e4d 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d403617d
title: Use the Lifecycle Method componentDidMount
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301422
localeTitle: Используйте метод Lifecycle MethodDidMount
---
## Description
- Большинство веб-разработчиков в какой-то момент должны вызывать конечную точку API для извлечения данных. Если вы работаете с React, важно знать, где выполнить это действие. Лучшей практикой в React является размещение вызовов API или любых вызовов на ваш сервер в методе жизненного цикла componentDidMount() . Этот метод вызывается после того, как компонент подключен к DOM. Любые вызовы setState() здесь setState() повторный рендеринг вашего компонента. Когда вы вызываете API в этом методе и устанавливаете свое состояние с данными, возвращаемыми API, он автоматически инициирует обновление после получения данных.
+
+Большинство веб-разработчиков в какой-то момент должны вызывать конечную точку API для извлечения данных. Если вы работаете с React, важно знать, где выполнить это действие. Лучшей практикой в React является размещение вызовов API или любых вызовов на ваш сервер в методе жизненного цикла componentDidMount() . Этот метод вызывается после того, как компонент подключен к DOM. Любые вызовы setState() здесь setState() повторный рендеринг вашего компонента. Когда вы вызываете API в этом методе и устанавливаете свое состояние с данными, возвращаемыми API, он автоматически инициирует обновление после получения данных.
+
## Instructions
- В componentDidMount() есть ложный вызов API. Он устанавливает состояние через 2,5 секунды, чтобы имитировать вызов сервера для извлечения данных. В этом примере запрашиваются текущие общие активные пользователи для сайта. В методе рендеринга визуализируйте значение activeUsers в h1 . Посмотрите, что происходит в предварительном просмотре, и не стесняйтесь менять таймаут, чтобы увидеть различные эффекты.
+
+В componentDidMount() есть ложный вызов API. Он устанавливает состояние через 2,5 секунды, чтобы имитировать вызов сервера для извлечения данных. В этом примере запрашиваются текущие общие активные пользователи для сайта. В методе рендеринга визуализируйте значение activeUsers в h1 . Посмотрите, что происходит в предварительном просмотре, и не стесняйтесь менять таймаут, чтобы увидеть различные эффекты.
+
## Tests
```yml
tests:
- - text: MyComponent должен отображать элемент div который обертывает тег h1 .
- testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return (mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1); })(), "MyComponent should render a div element which wraps an h1 tag.");'
- - text: Состояние компонента должно быть обновлено с помощью функции тайм-аута в componentDidMount .
- testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return new RegExp("setTimeout(.|\n)+setState(.|\n)+activeUsers").test(String(mockedComponent.instance().componentDidMount)); })(), "Component state should be updated with a timeout function in componentDidMount.");'
- - text: h1 тег должен оказывать activeUsers значение из MyComponent состояния «s.
- testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ activeUsers: 1237 }); return mockedComponent.find("h1").text(); }; const second = () => { mockedComponent.setState({ activeUsers: 1000 }); return mockedComponent.find("h1").text(); }; assert(new RegExp("1237").test(first()) && new RegExp("1000").test(second()), "The h1 tag should render the activeUsers value from MyComponent's state."); }; '
+ - text: MyComponent should render a div element which wraps an h1 tag.
+ testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return (mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1); })());
+ - text: Component state should be updated with a timeout function in componentDidMount.
+ testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(String(mockedComponent.instance().componentDidMount)); })());
+ - text: The h1 tag should render the activeUsers value from MyComponent's state.
+ testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ activeUsers: 1237 }); return mockedComponent.find(''h1'').text(); }; const second = () => { mockedComponent.setState({ activeUsers: 1000 }); return mockedComponent.find(''h1'').text(); }; assert(new RegExp(''1237'').test(first()) && new RegExp(''1000'').test(second())); }; '
```
@@ -62,12 +66,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.russian.md
index d141da1b4f..bc57336e87 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.russian.md
@@ -3,25 +3,29 @@ id: 5a24c314108439a4d403617c
title: Use the Lifecycle Method componentWillMount
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301423
localeTitle: Использовать компонент Lifecycle MethodWillMount
---
## Description
- У компонентов React есть несколько специальных методов, которые предоставляют возможности для выполнения действий в определенных точках жизненного цикла компонента. Они называются методами жизненного цикла, или крючками жизненного цикла, и позволяют вам быстро отслеживать компоненты в определенные моменты времени. Это может быть до того, как они будут визуализированы, прежде чем они будут обновлены, прежде чем они получат реквизиты, прежде чем они будут отключены, и так далее. Ниже приведен список некоторых основных методов жизненного цикла: componentWillMount()componentDidMount()componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()componentDidUpdate()componentWillUnmount() Следующие несколько уроков будут посвящены некоторым основным shouldComponentUpdate() использования этих методов жизненного цикла.
+
+У компонентов React есть несколько специальных методов, которые предоставляют возможности для выполнения действий в определенных точках жизненного цикла компонента. Они называются методами жизненного цикла, или крючками жизненного цикла, и позволяют вам быстро отслеживать компоненты в определенные моменты времени. Это может быть до того, как они будут визуализированы, прежде чем они будут обновлены, прежде чем они получат реквизиты, прежде чем они будут отключены, и так далее. Ниже приведен список некоторых основных методов жизненного цикла: componentWillMount()componentDidMount()componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()componentDidUpdate()componentWillUnmount() Следующие несколько уроков будут посвящены некоторым основным shouldComponentUpdate() использования этих методов жизненного цикла.
+
## Instructions
- Метод componentWillMount() вызывается перед методом render() когда компонент монтируется в DOM. Запишите что-нибудь на консоль в componentWillMount() - вы можете открыть консоль своего браузера для просмотра вывода.
+
+Метод componentWillMount() вызывается перед методом render() когда компонент монтируется в DOM. Запишите что-нибудь на консоль в componentWillMount() - вы можете открыть консоль своего браузера для просмотра вывода.
+
## Tests
```yml
tests:
- - text: MyComponent должен отображать элемент div .
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").length === 1; })(), "MyComponent should render a div element.");'
- - text: console.log следует вызывать в componentWillMount .
- testString: 'assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,""); return lifecycle.includes("console.log("); })(), "console.log should be called in componentWillMount.");'
+ - text: MyComponent should render a div element.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').length === 1; })());
+ - text: console.log should be called in componentWillMount.
+ testString: assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,''); return lifecycle.includes('console.log('); })());
```
@@ -51,12 +55,12 @@ class MyComponent extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
@@ -66,7 +70,20 @@ console.info('after the test');
## Solution
-```js
-// solution required
+```jsx
+class MyComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ componentWillMount() {
+ // change code below this line
+ console.log('Component is mounting...');
+ // change code above this line
+ }
+ render() {
+ return
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/write-a-react-component-from-scratch.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/write-a-react-component-from-scratch.russian.md
index 4046d23a70..b7c0421981 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/write-a-react-component-from-scratch.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/write-a-react-component-from-scratch.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036168
title: Write a React Component from Scratch
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301424
localeTitle: Напишите компонент реакции с нуля
---
## Description
- Теперь, когда вы изучили основы компонентов JSX и React, пришло время написать компонент самостоятельно. Реагирующие компоненты являются основными строительными блоками приложений React, поэтому важно хорошо ознакомиться с их написанием. Помните, что типичным компонентом React является class ES6, который расширяет React.Component . Он имеет метод рендеринга, который возвращает HTML (из JSX) или null . Это основная форма компонента React. Как только вы это хорошо поймете, вы будете готовы начать строительство более сложных проектов React.
+
+Теперь, когда вы изучили основы компонентов JSX и React, пришло время написать компонент самостоятельно. Реагирующие компоненты являются основными строительными блоками приложений React, поэтому важно хорошо ознакомиться с их написанием. Помните, что типичным компонентом React является class ES6, который расширяет React.Component . Он имеет метод рендеринга, который возвращает HTML (из JSX) или null . Это основная форма компонента React. Как только вы это хорошо поймете, вы будете готовы начать строительство более сложных проектов React.
+
## Instructions
- Определите класс MyComponent который расширяет React.Component . Его метод render должен возвращать div , содержащий тег h1 с текстом: My First React Component! в этом. Используйте этот текст точно, дело и значение пунктуации. Не забудьте также вызвать конструктор для вашего компонента. Передайте этот компонент в DOM с помощью ReactDOM.render() . Для вас доступен div с id='challenge-node' .
+
+Определите класс MyComponent который расширяет React.Component . Его метод render должен возвращать div , содержащий тег h1 с текстом: My First React Component! в этом. Используйте этот текст точно, дело и значение пунктуации. Не забудьте также вызвать конструктор для вашего компонента. Передайте этот компонент в DOM с помощью ReactDOM.render() . Для вас доступен div с id='challenge-node' .
+
## Tests
```yml
tests:
- - text: 'Должен быть компонент React, называемый MyComponent .'
- testString: 'getUserInput => assert(getUserInput("index").replace(/\s/g, "").includes("classMyComponentextendsReact.Component{"), "There should be a React component called MyComponent.");'
- - text: MyComponent должен содержать тег h1 с текстом My First React Component! Дело и пунктуация.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("h1").text() === "My First React Component!"; })(), "MyComponent should contain an h1 tag with text My First React Component! Case and punctuation matter.");'
- - text: MyComponent должен отображать DOM.
- testString: 'assert(document.getElementById("challenge-node").childNodes.length === 1, "MyComponent should render to the DOM.");'
+ - text: There should be a React component called MyComponent.
+ testString: getUserInput => assert(getUserInput('index').replace(/\s/g, '').includes('classMyComponentextendsReact.Component{'));
+ - text: MyComponent should contain an h1 tag with text My First React Component! Case and punctuation matter.
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })());
+ - text: MyComponent should render to the DOM.
+ testString: assert(document.getElementById('challenge-node').childNodes.length === 1);
```
@@ -41,14 +45,27 @@ tests:
-
-
## Solution
-```js
-// solution required
+```jsx
+// change code below this line
+class MyComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ return (
+
+
My First React Component!
+
+ );
+ }
+};
+
+ReactDOM.render(, document.getElementById('challenge-node'));
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/react/write-a-simple-counter.russian.md b/curriculum/challenges/russian/03-front-end-libraries/react/write-a-simple-counter.russian.md
index ae2a15909e..f9c8841d51 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/react/write-a-simple-counter.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/react/write-a-simple-counter.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d4036177
title: Write a Simple Counter
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301425
localeTitle: Написать простой счетчик
---
## Description
- Вы можете создать более сложный компонент, поддерживающий состояние, путем объединения концепций, охваченных до сих пор. К ним относятся инициализация state , методы записи, которые устанавливают state , и назначение обработчиков кликов для запуска этих методов.
+
+Вы можете создать более сложный компонент, поддерживающий состояние, путем объединения концепций, охваченных до сих пор. К ним относятся инициализация state , методы записи, которые устанавливают state , и назначение обработчиков кликов для запуска этих методов.
+
## Instructions
- Компонент Counter отслеживает значение count в state . Есть две кнопки, которые вызывают методы increment() и decrement() . Запишите эти методы, чтобы значение счетчика увеличивалось или уменьшалось на 1 при нажатии соответствующей кнопки. Кроме того, создайте метод reset() чтобы при нажатии кнопки сброса счетчик был установлен на 0. Примечание. Убедитесь, что вы не изменяете classNames кнопок. Кроме того, не забудьте добавить необходимые привязки для вновь созданных методов в конструкторе.
+
+Компонент Counter отслеживает значение count в state . Есть две кнопки, которые вызывают методы increment() и decrement() . Запишите эти методы, чтобы значение счетчика увеличивалось или уменьшалось на 1 при нажатии соответствующей кнопки. Кроме того, создайте метод reset() чтобы при нажатии кнопки сброса счетчик был установлен на 0. Примечание. Убедитесь, что вы не изменяете classNames кнопок. Кроме того, не забудьте добавить необходимые привязки для вновь созданных методов в конструкторе.
+
## Tests
```yml
tests:
- - text: 'Counter должен возвращать элемент div который содержит три кнопки с текстовым содержимым в этом порядке Increment! , Decrement! , Reset .'
- testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Counter)); return (mockedComponent.find(".inc").text() === "Increment!" && mockedComponent.find(".dec").text() === "Decrement!" && mockedComponent.find(".reset").text() === "Reset"); })(), "Counter should return a div element which contains three buttons with text content in this order Increment!, Decrement!, Reset.");'
- - text: Состояние Counter должно быть инициализировано с использованием свойства count равного 0 .
- testString: 'assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state("count"), 0, "The state of Counter should initialize with a count property set to 0.");'
- - text: Нажатие кнопки инкремента должно увеличивать счет на 1 .
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state("count")); }; const second = () => { mockedComponent.find(".inc").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, "Clicking the increment button should increment the count by 1."); }; '
- - text: ''
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state("count")); }; const second = () => { mockedComponent.find(".dec").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1, "Clicking the decrement button should decrement the count by 1."); }; '
- - text: Нажатие кнопки сброса должно сбрасывать счетчик на 0 .
- testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state("count")); }; const increment = () => { mockedComponent.find(".inc").simulate("click"); mockedComponent.find(".inc").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const decrement = () => { mockedComponent.find(".dec").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const reset = () => { mockedComponent.find(".reset").simulate("click"); return waitForIt(() => mockedComponent.state("count")); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 2 && thirdValue === 1 && fourthValue === 0, "Clicking the reset button should reset the count to 0."); }; '
+ - text: Counter should return a div element which contains three buttons with text content in this order Increment!, Decrement!, Reset.
+ testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Counter)); return (mockedComponent.find('.inc').text() === 'Increment!' && mockedComponent.find('.dec').text() === 'Decrement!' && mockedComponent.find('.reset').text() === 'Reset'); })());
+ - text: The state of Counter should initialize with a count property set to 0.
+ testString: assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state('count'), 0);
+ - text: Clicking the increment button should increment the count by 1.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const second = () => { mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1); }; '
+ - text: Clicking the decrement button should decrement the count by 1.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const second = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1); }; '
+ - text: Clicking the reset button should reset the count to 0.
+ testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const increment = () => { mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const decrement = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const reset = () => { mockedComponent.find(''.reset'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 3 && thirdValue === 2 && fourthValue === 0); }; '
```
@@ -45,13 +49,13 @@ class Counter extends React.Component {
this.state = {
count: 0
};
- // Измените код ниже
+ // change code below this line
- // Измените код выше
+ // change code above this line
}
- // Измените код ниже
+ // change code below this line
- // Измените код выше
+ // change code above this line
render() {
return (
@@ -68,12 +72,12 @@ class Counter extends React.Component {
-
-### After Test
+### After Tests
-```js
-console.info('after the test');
+```jsx
+ReactDOM.render(, document.getElementById('root'))
+
```
+ );
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/combine-multiple-reducers.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/combine-multiple-reducers.russian.md
index f060579490..b9f6b50b76 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/combine-multiple-reducers.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/combine-multiple-reducers.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036154
title: Combine Multiple Reducers
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301436
localeTitle: Объединение нескольких редукторов
---
## Description
- Когда состояние вашего приложения начинает становиться более сложным, может возникнуть соблазн разделить состояние на несколько частей. Вместо этого запомните первый принцип Redux: все состояние приложения хранится в одном объекте состояния в хранилище. Поэтому Redux предоставляет композицию редукторов как решение для сложной модели состояния. Вы определяете несколько редукторов для обработки разных частей состояния вашего приложения, а затем объединяете эти редукторы в один корневой редуктор. Корневой редуктор затем передается в метод Redux createStore() . Чтобы объединить несколько редукторов вместе, в Redux есть метод combineReducers() . Этот метод принимает объект как аргумент, в котором вы определяете свойства, которые связывают ключи с конкретными функциями редуктора. Имя, которое вы задаёте ключам, будет использоваться Redux как имя для связанной части состояния. Как правило, хорошей практикой является создание редуктора для каждой части состояния приложения, когда они являются особенными или уникальными в некотором роде. Например, в приложении для заметок с аутентификацией пользователя один редуктор может обрабатывать аутентификацию, а другой - текст и заметки, которые пользователь отправляет. Для такого приложения мы можем написать метод combineReducers() следующим образом:
Теперь ключ notes будет содержать все состояние, связанное с нашими заметками и обрабатываемое нашим notesReducer . Так можно создать несколько редукторов для управления более сложным состоянием приложения. В этом примере состояние, находящееся в хранилище Redux, будет тогда единственным объектом, содержащим свойства auth и notes .
+
+Когда состояние вашего приложения начинает становиться более сложным, может возникнуть соблазн разделить состояние на несколько частей. Вместо этого запомните первый принцип Redux: все состояние приложения хранится в одном объекте состояния в хранилище. Поэтому Redux предоставляет композицию редукторов как решение для сложной модели состояния. Вы определяете несколько редукторов для обработки разных частей состояния вашего приложения, а затем объединяете эти редукторы в один корневой редуктор. Корневой редуктор затем передается в метод Redux createStore() . Чтобы объединить несколько редукторов вместе, в Redux есть метод combineReducers() . Этот метод принимает объект как аргумент, в котором вы определяете свойства, которые связывают ключи с конкретными функциями редуктора. Имя, которое вы задаёте ключам, будет использоваться Redux как имя для связанной части состояния. Как правило, хорошей практикой является создание редуктора для каждой части состояния приложения, когда они являются особенными или уникальными в некотором роде. Например, в приложении для заметок с аутентификацией пользователя один редуктор может обрабатывать аутентификацию, а другой - текст и заметки, которые пользователь отправляет. Для такого приложения мы можем написать метод combineReducers() следующим образом:
Теперь ключ notes будет содержать все состояние, связанное с нашими заметками и обрабатываемое нашим notesReducer . Так можно создать несколько редукторов для управления более сложным состоянием приложения. В этом примере состояние, находящееся в хранилище Redux, будет тогда единственным объектом, содержащим свойства auth и notes .
+
## Instructions
- В редакторе кода заданы функции counterReducer() и authReducer() , а также хранилище Redux. Завершите написание функции rootReducer() , используя Redux.combineReducers() . Назначьте counterReducer ключу с именем count и authReducer - ключу с именем auth .
+
+В редакторе кода заданы функции counterReducer() и authReducer() , а также хранилище Redux. Завершите написание функции rootReducer() , используя Redux.combineReducers() . Назначьте counterReducer ключу с именем count и authReducer - ключу с именем auth .
+
## Tests
```yml
tests:
- - text: counterReducer должен увеличивать и уменьшать state .
- testString: 'assert((function() { const initalState = store.getState().count; store.dispatch({type: INCREMENT}); store.dispatch({type: INCREMENT}); const firstState = store.getState().count; store.dispatch({type: DECREMENT}); const secondState = store.getState().count; return firstState === initalState + 2 && secondState === firstState - 1 })(), "The counterReducer should increment and decrement the state.");'
- - text: authReducer должен переключать stateauthenticated между true и false .
- testString: 'assert((function() { store.dispatch({type: LOGIN}); const loggedIn = store.getState().auth.authenticated; store.dispatch({type: LOGOUT}); const loggedOut = store.getState().auth.authenticated; return loggedIn === true && loggedOut === false })(), "The authReducer should toggle the state of authenticated between true and false.");'
- - text: 'Хранилище state должно иметь два ключа: count , который содержит число и auth , который содержит объект. Объект auth должен иметь свойство authenticated , которое содержит логическое значение.'
- testString: 'assert((function() { const state = store.getState(); return typeof state.auth === "object" && typeof state.auth.authenticated === "boolean" && typeof state.count === "number" })(), "The store state should have two keys: count, which holds a number, and auth, which holds an object. The auth object should have a property of authenticated, which holds a boolean.");'
- - text: 'rootReducer должен быть функцией, которая объединяет counterReducer и authReducer .'
- testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return typeof rootReducer === "function" && noWhiteSpace.includes("Redux.combineReducers") })(), "The rootReducer should be a function that combines the counterReducer and the authReducer.");'
+ - text: The counterReducer should increment and decrement the state.
+ testString: 'assert((function() { const initalState = store.getState().count; store.dispatch({type: INCREMENT}); store.dispatch({type: INCREMENT}); const firstState = store.getState().count; store.dispatch({type: DECREMENT}); const secondState = store.getState().count; return firstState === initalState + 2 && secondState === firstState - 1 })());'
+ - text: The authReducer should toggle the state of authenticated between true and false.
+ testString: 'assert((function() { store.dispatch({type: LOGIN}); const loggedIn = store.getState().auth.authenticated; store.dispatch({type: LOGOUT}); const loggedOut = store.getState().auth.authenticated; return loggedIn === true && loggedOut === false })());'
+ - text: 'The store state should have two keys: count, which holds a number, and auth, which holds an object. The auth object should have a property of authenticated, which holds a boolean.'
+ testString: assert((function() { const state = store.getState(); return typeof state.auth === 'object' && typeof state.auth.authenticated === 'boolean' && typeof state.count === 'number' })());
+ - text: The rootReducer should be a function that combines the counterReducer and the authReducer.
+ testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return typeof rootReducer === 'function' && noWhiteSpace.includes('Redux.combineReducers') })());
```
@@ -69,7 +73,7 @@ const authReducer = (state = {authenticated: false}, action) => {
}
};
-const rootReducer = // определите здесь корневой редуктор
+const rootReducer = // define the root reducer here
const store = Redux.createStore(rootReducer);
@@ -77,14 +81,50 @@ const store = Redux.createStore(rootReducer);
-
-
## Solution
-```js
-// solution required
+```jsx
+const INCREMENT = 'INCREMENT';
+const DECREMENT = 'DECREMENT';
+
+const counterReducer = (state = 0, action) => {
+ switch(action.type) {
+ case INCREMENT:
+ return state + 1;
+ case DECREMENT:
+ return state - 1;
+ default:
+ return state;
+ }
+};
+
+const LOGIN = 'LOGIN';
+const LOGOUT = 'LOGOUT';
+
+const authReducer = (state = {authenticated: false}, action) => {
+ switch(action.type) {
+ case LOGIN:
+ return {
+ authenticated: true
+ }
+ case LOGOUT:
+ return {
+ authenticated: false
+ }
+ default:
+ return state;
+ }
+};
+
+const rootReducer = Redux.combineReducers({
+ count: counterReducer,
+ auth: authReducer
+});
+
+const store = Redux.createStore(rootReducer);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/copy-an-object-with-object.assign.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/copy-an-object-with-object.assign.russian.md
index 770eef6eb2..cf29b6deb0 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/copy-an-object-with-object.assign.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/copy-an-object-with-object.assign.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d403615b
title: Copy an Object with Object.assign
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301437
localeTitle: Скопировать объект с Object.assign
---
## Description
- Последние несколько проблем работали с массивами, но есть способы помочь обеспечить неизменность состояния, когда государство тоже является object . Полезным инструментом для обработки объектов является Object.assign() . Object.assign() принимает объекты-объекты-объекты и исходные объекты и свойства карт из исходных объектов в целевой объект. Любые соответствующие свойства перезаписываются свойствами в исходных объектах. Это поведение обычно используется для создания мелких копий объектов путем передачи пустого объекта в качестве первого аргумента, за которым следует объект (ы), который вы хотите скопировать. Вот пример: const newObject = Object.assign({}, obj1, obj2); Это создает newObject как новый object , который содержит свойства, которые в настоящее время существуют в obj1 и obj2 .
+
+Последние несколько проблем работали с массивами, но есть способы помочь обеспечить неизменность состояния, когда государство тоже является object . Полезным инструментом для обработки объектов является Object.assign() . Object.assign() принимает объекты-объекты-объекты и исходные объекты и свойства карт из исходных объектов в целевой объект. Любые соответствующие свойства перезаписываются свойствами в исходных объектах. Это поведение обычно используется для создания мелких копий объектов путем передачи пустого объекта в качестве первого аргумента, за которым следует объект (ы), который вы хотите скопировать. Вот пример: const newObject = Object.assign({}, obj1, obj2); Это создает newObject как новый object , который содержит свойства, которые в настоящее время существуют в obj1 и obj2 .
+
## Instructions
- Состояние и действия Redux были изменены для обработки object для state . Отредактируйте код, чтобы вернуть новый объект state для действий с типом ONLINE , которые устанавливают свойство status в строку online . Попробуйте использовать Object.assign() для выполнения задачи.
+
+Состояние и действия Redux были изменены для обработки object для state . Отредактируйте код, чтобы вернуть новый объект state для действий с типом ONLINE , которые устанавливают свойство status в строку online . Попробуйте использовать Object.assign() для выполнения задачи.
+
## Tests
```yml
tests:
- - text: 'Хранилище Redux должно существовать и инициализироваться с состоянием, которое эквивалентно объекту defaultState объявленному в строке 1.'
- testString: 'assert((function() { const expectedState = { user: "CamperBot", status: "offline", friends: "732,982", community: "freeCodeCamp" }; const initialState = store.getState(); return DeepEqual(expectedState, initialState); })(), "The Redux store should exist and initialize with a state that is equivalent to the defaultState object declared on line 1.");'
- - text: wakeUp и immutableReducer должны быть функциями.
- testString: 'assert(typeof wakeUp === "function" && typeof immutableReducer === "function", "wakeUp and immutableReducer both should be functions.");'
- - text: Отправка действия типа ONLINE должна обновить status в состоянии в online и не должна мутировать состояние.
- testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch({type: "ONLINE"}); const finalState = store.getState(); const expectedState = { user: "CamperBot", status: "online", friends: "732,982", community: "freeCodeCamp" }; return isFrozen && DeepEqual(finalState, expectedState); })(), "Dispatching an action of type ONLINE should update the property status in state to online and should NOT mutate state.");'
- - text: Object.assign следует использовать для возврата нового состояния.
- testString: 'getUserInput => assert(getUserInput("index").includes("Object.assign"), "Object.assign should be used to return new state.");'
+ - text: The Redux store should exist and initialize with a state that is equivalent to the defaultState object declared on line 1.
+ testString: 'assert((function() { const expectedState = { user: ''CamperBot'', status: ''offline'', friends: ''732,982'', community: ''freeCodeCamp'' }; const initialState = store.getState(); return DeepEqual(expectedState, initialState); })());'
+ - text: wakeUp and immutableReducer both should be functions.
+ testString: assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function');
+ - text: Dispatching an action of type ONLINE should update the property status in state to online and should NOT mutate state.
+ testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch({type: ''ONLINE''}); const finalState = store.getState(); const expectedState = { user: ''CamperBot'', status: ''online'', friends: ''732,982'', community: ''freeCodeCamp'' }; return isFrozen && DeepEqual(finalState, expectedState); })());'
+ - text: Object.assign should be used to return new state.
+ testString: getUserInput => assert(getUserInput('index').includes('Object.assign'));
```
@@ -66,14 +70,37 @@ const store = Redux.createStore(immutableReducer);
-
-
## Solution
-```js
-// solution required
+```jsx
+const defaultState = {
+ user: 'CamperBot',
+ status: 'offline',
+ friends: '732,982',
+ community: 'freeCodeCamp'
+};
+
+const immutableReducer = (state = defaultState, action) => {
+ switch(action.type) {
+ case 'ONLINE':
+ return Object.assign({}, state, {
+ status: 'online'
+ });
+ default:
+ return state;
+ }
+};
+
+const wakeUp = () => {
+ return {
+ type: 'ONLINE'
+ }
+};
+
+const store = Redux.createStore(immutableReducer);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/create-a-redux-store.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/create-a-redux-store.russian.md
index 8c0c681dcf..2f628dd7ac 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/create-a-redux-store.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/create-a-redux-store.russian.md
@@ -3,25 +3,29 @@ id: 5a24c314108439a4d403614b
title: Create a Redux Store
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301439
localeTitle: Создание Redux хранилища
---
## Description
- Redux - это система управления состоянием (state), которая может использоваться с различными веб-технологиями, включая React. В Redux один объект состояния, который отвечает за все состояние вашего приложения. Это означает, что если у вас было приложение React с десятью компонентами, и каждый компонент имел свое собственное локальное состояние, то всё состояние вашего приложения было бы определено одним объектом состояния, размещенным в Redux store . Это первый важный принцип, который следует понимать при изучении Redux: хранилище Redux является единственным источником правды, когда дело касается состояния приложения. Это также означает, что в любое время, когда какая-либо часть вашего приложения хочет обновить состояние, она должна сделать это через хранилище Redux. Однонаправленный поток данных облегчает управление состоянием в вашем приложении.
+
+Redux - это система управления состоянием (state), которая может использоваться с различными веб-технологиями, включая React. В Redux один объект состояния, который отвечает за все состояние вашего приложения. Это означает, что если у вас было приложение React с десятью компонентами, и каждый компонент имел свое собственное локальное состояние, то всё состояние вашего приложения было бы определено одним объектом состояния, размещенным в Redux store . Это первый важный принцип, который следует понимать при изучении Redux: хранилище Redux является единственным источником правды, когда дело касается состояния приложения. Это также означает, что в любое время, когда какая-либо часть вашего приложения хочет обновить состояние, она должна сделать это через хранилище Redux. Однонаправленный поток данных облегчает управление состоянием в вашем приложении.
+
## Instructions
- Redux store является объектом, который хранит и управляет состоянием приложения state . В объекте Redux существует метод, называемый createStore() , который вы используете для создания Redux store . Этот метод принимает функцию reducer как обязательный аргумент. Функция reducer рассматривается далее в упражнениях и уже определена для вас в редакторе кода. Она просто принимает state как аргумент и возвращает state . Объявите переменную store и присвойте ей метод createStore() , передав reducer в качестве аргумента. Примечание . Код в редакторе использует ES6 синтаксис аргумента по умолчанию, чтобы инициализировать состояние значением 5 . Если вы не знакомы с аргументами по умолчанию, вы можете обратиться к разделу ES6 в учебной программе .
+
+Redux store является объектом, который хранит и управляет состоянием приложения state . В объекте Redux существует метод, называемый createStore() , который вы используете для создания Redux store . Этот метод принимает функцию reducer как обязательный аргумент. Функция reducer рассматривается далее в упражнениях и уже определена для вас в редакторе кода. Она просто принимает state как аргумент и возвращает state . Объявите переменную store и присвойте ей метод createStore() , передав reducer в качестве аргумента. Примечание . Код в редакторе использует ES6 синтаксис аргумента по умолчанию, чтобы инициализировать состояние значением 5 . Если вы не знакомы с аргументами по умолчанию, вы можете обратиться к разделу ES6 в учебной программе .
+
## Tests
```yml
tests:
- - text: Redux хранилище существует.
- testString: 'assert(typeof store.getState === "function", "The redux store exists.");'
- - text: В Redux хранилище есть значение 5 для состояния.
- testString: 'assert(store.getState()=== 5, "The redux store has a value of 5 for the state.");'
+ - text: The redux store exists.
+ testString: assert(typeof store.getState === 'function');
+ - text: The redux store has a value of 5 for the state.
+ testString: assert(store.getState()=== 5);
```
@@ -37,22 +41,29 @@ const reducer = (state = 5) => {
return state;
}
-// Redux методы доступны из Redux объекта
-// Например: Redux.createStore()
-// Объявите хранилище здесь:
+// Redux methods are available from a Redux object
+// For example: Redux.createStore()
+// Define the store here:
```
-
-
## Solution
-```js
-// solution required
+```jsx
+const reducer = (state = 5) => {
+ return state;
+}
+
+// Redux methods are available from a Redux object
+// For example: Redux.createStore()
+// Define the store here:
+
+const store = Redux.createStore(reducer);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/define-a-redux-action.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/define-a-redux-action.russian.md
index 6282728540..416fbcdc1c 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/define-a-redux-action.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/define-a-redux-action.russian.md
@@ -3,25 +3,29 @@ id: 5a24c314108439a4d403614d
title: Define a Redux Action
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301440
localeTitle: Определение Redux действия
---
## Description
- Т.к. Redux - это фреймворк управления состоянием, то обновление состояния - одна из его главных задач. В Redux все обновления состояния срабатывают по диспетчерским действиям. Действие - это просто JavaScript объект, который содержит информацию о произошедшем событии. Хранилище Redux получает объекты действий, затем обновляет состояние, если нужно. Иногда Redux действие также содержит некоторую дополнительную информацию. Например, действие "сообщает" имя пользователя после успешного входа в систему. Действие обязательно должно содержать поле type , которое указывает "тип" исполняемого действия. Думайте о действиях Redux как о сообщениях, которые передают информацию о событиях, происходящих в вашем приложении, хранилищу Redux. Хранилище затем занимается обновлением состояния, на основании действия которое случилось.
+
+Т.к. Redux - это фреймворк управления состоянием, то обновление состояния - одна из его главных задач. В Redux все обновления состояния срабатывают по диспетчерским действиям. Действие - это просто JavaScript объект, который содержит информацию о произошедшем событии. Хранилище Redux получает объекты действий, затем обновляет состояние, если нужно. Иногда Redux действие также содержит некоторую дополнительную информацию. Например, действие "сообщает" имя пользователя после успешного входа в систему. Действие обязательно должно содержать поле type , которое указывает "тип" исполняемого действия. Думайте о действиях Redux как о сообщениях, которые передают информацию о событиях, происходящих в вашем приложении, хранилищу Redux. Хранилище затем занимается обновлением состояния, на основании действия которое случилось.
+
## Instructions
- Написание действия Redux это просто объявление объекта со свойством "тип". Объявите объект action и передайте ему свойство type со строковым значением 'LOGIN' .
+
+Написание действия Redux это просто объявление объекта со свойством "тип". Объявите объект action и передайте ему свойство type со строковым значением 'LOGIN' .
+
## Tests
```yml
tests:
- - text: 'Объект действия существует.'
- testString: 'assert((function() { return typeof action === "object" })(), "An action object should exist.");'
- - text: 'Действие должно содержать свойство (ключ) type со значением LOGIN .'
- testString: 'assert((function() { return action.type === "LOGIN" })(), "The action should have a key property type with value LOGIN.");'
+ - text: An action object should exist.
+ testString: assert((function() { return typeof action === 'object' })());
+ - text: The action should have a key property type with value LOGIN.
+ testString: assert((function() { return action.type === 'LOGIN' })());
```
@@ -33,20 +37,21 @@ tests:
```jsx
-// Объявите действие здесь:
+// Define an action here:
```
-
-
## Solution
-```js
-// solution required
+```jsx
+const action = {
+ type: 'LOGIN'
+}
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/define-an-action-creator.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/define-an-action-creator.russian.md
index fb0c655af6..6ce286f08c 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/define-an-action-creator.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/define-an-action-creator.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d403614e
title: Define an Action Creator
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301441
localeTitle: Определить создателя действия
---
## Description
- После создания действия следующий шаг - отправление действия в хранилище Redux, чтобы обновить свое состояние. В Redux вы определяете создателей действий для завершения процесса. Создатель действия - это просто функция JavaScript, которая возвращает действие. Другими словами, создатели действий создают объекты, которые представляют события действия.
+
+После создания действия следующий шаг - отправление действия в хранилище Redux, чтобы обновить свое состояние. В Redux вы определяете создателей действий для завершения процесса. Создатель действия - это просто функция JavaScript, которая возвращает действие. Другими словами, создатели действий создают объекты, которые представляют события действия.
+
## Instructions
- Определите функцию actionCreator() , которая возвращает объект action при вызове.
+
+Определите функцию actionCreator() , которая возвращает объект action при вызове.
+
## Tests
```yml
tests:
- - text: Функция actionCreator должна существовать.
- testString: 'assert(typeof actionCreator === "function", "The function actionCreator should exist.");'
- - text: Запуск функции actionCreator должен вернуть объект действия.
- testString: 'assert(typeof action === "object", "Running the actionCreator function should return the action object.");'
- - text: Возвращаемое действие должно иметь свойство type со значением LOGIN .
- testString: 'assert(action.type === "LOGIN", "The returned action should have a key property type with value LOGIN.");'
+ - text: The function actionCreator should exist.
+ testString: assert(typeof actionCreator === 'function');
+ - text: Running the actionCreator function should return the action object.
+ testString: assert(typeof action === 'object');
+ - text: The returned action should have a key property type with value LOGIN.
+ testString: assert(action.type === 'LOGIN');
```
@@ -38,20 +42,25 @@ tests:
const action = {
type: 'LOGIN'
}
-// Определите создателя действия здесь:
+// Define an action creator here:
```
-
-
## Solution
-```js
-// solution required
+```jsx
+const action = {
+ type: 'LOGIN'
+}
+// Define an action creator here:
+const actionCreator = () => {
+ return action;
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/dispatch-an-action-event.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/dispatch-an-action-event.russian.md
index bb6a316f99..b5736b77b1 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/dispatch-an-action-event.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/dispatch-an-action-event.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d403614f
title: Dispatch an Action Event
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301442
localeTitle: Отправка события
---
## Description
- Метод dispatch - это то, что вы используете для отправки действий в хранилище Redux. Вызов store.dispatch() со значением, которое получено из создателя действия, посылает действие обратно в хранилище. Напомним, что создатель действия возвращает объект со свойством type, который определяет произошедшее действие. Потом метод отправляет объект действия в хранилище Redux. Основываясь на примере из предыдущего упражнения, следующие строки эквивалентны, и обе отправляют действие типа LOGIN :
+
+Метод dispatch - это то, что вы используете для отправки действий в хранилище Redux. Вызов store.dispatch() со значением, которое получено из создателя действия, посылает действие обратно в хранилище. Напомним, что создатель действия возвращает объект со свойством type, который определяет произошедшее действие. Потом метод отправляет объект действия в хранилище Redux. Основываясь на примере из предыдущего упражнения, следующие строки эквивалентны, и обе отправляют действие типа LOGIN :
+
## Instructions
- В редакторе кода в хранилище Redux инициализировано состояние в виде объекта со свойством login , у которого задано значение false . Также объявлен создатель действия loginAction() , который возвращает действие типа LOGIN . Отправьте действие LOGIN в хранилище Redux, вызвав метод dispatch и передайте ему действие, созданное функцией loginAction() .
+
+В редакторе кода в хранилище Redux инициализировано состояние в виде объекта со свойством login , у которого задано значение false . Также объявлен создатель действия loginAction() , который возвращает действие типа LOGIN . Отправьте действие LOGIN в хранилище Redux, вызвав метод dispatch и передайте ему действие, созданное функцией loginAction() .
+
## Tests
```yml
tests:
- - text: Вызов функции loginAction должен возвращать объект со свойством type , у которого установлено значение LOGIN .
- testString: 'assert(loginAction().type === "LOGIN", "Calling the function loginAction should return an object with type property set to the string LOGIN.");'
- - text: Хранилище должно быть инициализировано объектом с идентификатором login , установленным в значение false .
- testString: 'assert(store.getState().login === false, "The store should be initialized with an object with property login set to false.");'
- - text: Метод store.dispatch() должен использоваться для отправки действия типа LOGIN .
- testString: 'getUserInput => assert((function() { let noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("store.dispatch(loginAction())") || noWhiteSpace.includes("store.dispatch({type: \"LOGIN\"})") === true })(), "The store.dispatch() method should be used to dispatch an action of type LOGIN.");'
+ - text: Calling the function loginAction should return an object with type property set to the string LOGIN.
+ testString: assert(loginAction().type === 'LOGIN');
+ - text: The store should be initialized with an object with property login set to false.
+ testString: assert(store.getState().login === false);
+ - text: The store.dispatch() method should be used to dispatch an action of type LOGIN.
+ testString: 'getUserInput => assert((function() { let noWhiteSpace = getUserInput(''index'').replace(/\s/g,''''); return noWhiteSpace.includes(''store.dispatch(loginAction())'') || noWhiteSpace.includes(''store.dispatch({type: \''LOGIN\''})'') === true })());'
```
@@ -45,20 +49,30 @@ const loginAction = () => {
}
};
-// Отправьте действие здесь:
+// Dispatch the action here:
```
-
-
## Solution
-```js
-// solution required
+```jsx
+const store = Redux.createStore(
+ (state = {login: false}) => state
+);
+
+const loginAction = () => {
+ return {
+ type: 'LOGIN'
+ }
+};
+
+// Dispatch the action here:
+store.dispatch(loginAction());
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/get-state-from-the-redux-store.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/get-state-from-the-redux-store.russian.md
index 9157c1d637..7d51f15b51 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/get-state-from-the-redux-store.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/get-state-from-the-redux-store.russian.md
@@ -3,25 +3,29 @@ id: 5a24c314108439a4d403614c
title: Get State from the Redux Store
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301443
localeTitle: Получение состояния из хранилища Redux
---
## Description
- У объекта хранилища Redux есть несколько методов, которые позволяют вам взаимодействовать с ним. Например, вы можете получить текущее состояние state , сохраненное в объекте хранилища Redux, с помощью метода getState() .
+
+У объекта хранилища Redux есть несколько методов, которые позволяют вам взаимодействовать с ним. Например, вы можете получить текущее состояние state , сохраненное в объекте хранилища Redux, с помощью метода getState() .
+
## Instructions
- Код из предыдущего упражнения переписан более кратко в редакторе кода. Используйте store.getState() для извлечения state из store и присвойте его новой переменной currentState .
+
+Код из предыдущего упражнения переписан более кратко в редакторе кода. Используйте store.getState() для извлечения state из store и присвойте его новой переменной currentState .
+
## Tests
```yml
tests:
- - text: В хранилище Redux должно быть значение 5 для начального состояния.
- testString: 'assert(store.getState()===5, "The redux store should have a value of 5 for the initial state.");'
- - text: Переменная currentState должна существовать, и ей должно быть присвоено текущее состояние хранилища Redux.
- testString: 'getUserInput => assert(currentState === 5 && getUserInput("index").includes("store.getState()"), "A variable currentState should exist and should be assigned the current state of the Redux store.");'
+ - text: The redux store should have a value of 5 for the initial state.
+ testString: assert(store.getState()===5);
+ - text: A variable currentState should exist and should be assigned the current state of the Redux store.
+ testString: getUserInput => assert(currentState === 5 && getUserInput('index').includes('store.getState()'));
```
@@ -37,20 +41,24 @@ const store = Redux.createStore(
(state = 5) => state
);
-// измените код ниже этой линии
+// change code below this line
```
-
-
## Solution
-```js
-// solution required
+```jsx
+const store = Redux.createStore(
+ (state = 5) => state
+);
+
+// change code below this line
+const currentState = store.getState();
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/handle-an-action-in-the-store.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/handle-an-action-in-the-store.russian.md
index 0fb48a37c8..e74bd131f6 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/handle-an-action-in-the-store.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/handle-an-action-in-the-store.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036150
title: Handle an Action in the Store
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301444
localeTitle: Обработка действия в хранилище
---
## Description
- После того, как действие создано и отправлено, хранилище Redux должно знать, как реагировать на это действие. Это задача функции reducer . Редукторы в Redux отвечают за изменения состояния, которые происходят в ответ на действия. reducer принимает state и action в качестве аргументов и всегда возвращает новое state . Важно видеть, что это единственная роль редуктора. Он не имеет побочных эффектов - он никогда не вызывает конечную точку API (API endpoint) и никогда не имеет никаких скрытых сюрпризов. Редуктор - это просто чистая функция, которая принимает состояние и действие, а затем возвращает новое состояние. Другим ключевым принципом в Redux является то, что state доступно только для чтения. Другими словами, функция reducer должна всегда возвращать новую копию state и никогда не изменять состояние напрямую. Redux не обеспечивает неизменность состояния, однако вы несете ответственность за его выполнение в коде своих функций редуктора. Вы будете практиковать это в следующих упражнениях.
+
+После того, как действие создано и отправлено, хранилище Redux должно знать, как реагировать на это действие. Это задача функции reducer . Редукторы в Redux отвечают за изменения состояния, которые происходят в ответ на действия. reducer принимает state и action в качестве аргументов и всегда возвращает новое state . Важно видеть, что это единственная роль редуктора. Он не имеет побочных эффектов - он никогда не вызывает конечную точку API (API endpoint) и никогда не имеет никаких скрытых сюрпризов. Редуктор - это просто чистая функция, которая принимает состояние и действие, а затем возвращает новое состояние. Другим ключевым принципом в Redux является то, что state доступно только для чтения. Другими словами, функция reducer должна всегда возвращать новую копию state и никогда не изменять состояние напрямую. Redux не обеспечивает неизменность состояния, однако вы несете ответственность за его выполнение в коде своих функций редуктора. Вы будете практиковать это в следующих упражнениях.
+
## Instructions
- В редакторе кода записан предыдущий пример, а также каркас функции reducer для вас. Заполните тело функции reducer так, чтобы, если она получает действие типа 'LOGIN' она возвращает объект состояния с login , установленным в true . В противном случае он возвращает текущее state . Обратите внимание, что текущее state и отправленное action передаются в редуктор, поэтому вы можете напрямую обращаться к типу действия с помощью action.type .
+
+В редакторе кода записан предыдущий пример, а также каркас функции reducer для вас. Заполните тело функции reducer так, чтобы, если она получает действие типа 'LOGIN' она возвращает объект состояния с login , установленным в true . В противном случае он возвращает текущее state . Обратите внимание, что текущее state и отправленное action передаются в редуктор, поэтому вы можете напрямую обращаться к типу действия с помощью action.type .
+
## Tests
```yml
tests:
- - text: 'Вызов функции loginAction должен возвращать объект со свойством type, установленным в строку LOGIN .'
- testString: 'assert(loginAction().type === "LOGIN", "Calling the function loginAction should return an object with type property set to the string LOGIN.");'
- - text: Хранилище должно быть инициализировано объектом с идентификатором login , установленным в значение false .
- testString: 'assert(store.getState().login === false, "The store should be initialized with an object with property login set to false.");'
- - text: 'Отправка loginAction должна обновлять свойство login в состоянии хранилища на true .'
- testString: 'assert((function() { const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })(), "Dispatching loginAction should update the login property in the store state to true.");'
- - text: 'Если действие не типа LOGIN , то хранилище должно вернуть текущее состояние.'
- testString: 'assert((function() { store.dispatch({type: "__TEST__ACTION__"}); let afterTest = store.getState(); return typeof afterTest === "object" && afterTest.hasOwnProperty("login") })(), "If the action is not of type LOGIN, the store should return the current state.");'
+ - text: Calling the function loginAction should return an object with type property set to the string LOGIN.
+ testString: assert(loginAction().type === 'LOGIN');
+ - text: The store should be initialized with an object with property login set to false.
+ testString: assert(store.getState().login === false);
+ - text: Dispatching loginAction should update the login property in the store state to true.
+ testString: assert((function() { const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })());
+ - text: If the action is not of type LOGIN, the store should return the current state.
+ testString: 'assert((function() { store.dispatch({type: ''__TEST__ACTION__''}); let afterTest = store.getState(); return typeof afterTest === ''object'' && afterTest.hasOwnProperty(''login'') })());'
```
@@ -42,9 +46,9 @@ const defaultState = {
};
const reducer = (state = defaultState, action) => {
- // изменить код ниже этой линии
+ // change code below this line
- // измените код выше этой линии
+ // change code above this line
};
const store = Redux.createStore(reducer);
@@ -59,14 +63,35 @@ const loginAction = () => {
-
-
## Solution
-```js
-// solution required
+```jsx
+const defaultState = {
+ login: false
+};
+
+const reducer = (state = defaultState, action) => {
+
+ if (action.type === 'LOGIN') {
+ return {login: true}
+ }
+
+ else {
+ return state
+ }
+
+};
+
+const store = Redux.createStore(reducer);
+
+const loginAction = () => {
+ return {
+ type: 'LOGIN'
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/never-mutate-state.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/never-mutate-state.russian.md
index 517a82ee8b..d445963ea7 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/never-mutate-state.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/never-mutate-state.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d4036158
title: Never Mutate State
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301445
localeTitle: Никогда не мутируйте государство
---
## Description
- Эти заключительные проблемы описывают несколько способов обеспечения ключевого принципа неизменности состояния в Redux. Неизменяемое состояние означает, что вы никогда не изменяете состояние напрямую, вместо этого вы возвращаете новую копию состояния. Если вы взяли снимок состояния Redux приложения с течением времени, вы увидите что - то вроде state 1 , state 2 , state 3 , state 4 , ... и так далее , где каждое состояние может быть аналогично последним, но каждый представляет собой отдельную часть данных. Эта непреложность, по сути, является тем, что обеспечивает такие функции, как отладка во время путешествия, о которой вы, возможно, слышали. Redux не активно применяет неизменность государства в своем магазине или редукторах, эта ответственность ложится на программиста. К счастью, JavaScript (особенно ES6) предоставляет несколько полезных инструментов, которые можно использовать для обеспечения неизменности вашего состояния, будь то string , number , array или object . Обратите внимание, что строки и числа являются примитивными значениями и неизменны по своей природе. Другими словами, 3 всегда 3. Вы не можете изменить значение числа 3. array или object , однако, являются изменяемыми. На практике ваше состояние, вероятно, будет состоять из array или object , поскольку они являются полезными структурами данных для представления многих типов информации.
+
+Эти заключительные проблемы описывают несколько способов обеспечения ключевого принципа неизменности состояния в Redux. Неизменяемое состояние означает, что вы никогда не изменяете состояние напрямую, вместо этого вы возвращаете новую копию состояния. Если вы взяли снимок состояния Redux приложения с течением времени, вы увидите что - то вроде state 1 , state 2 , state 3 , state 4 , ... и так далее , где каждое состояние может быть аналогично последним, но каждый представляет собой отдельную часть данных. Эта непреложность, по сути, является тем, что обеспечивает такие функции, как отладка во время путешествия, о которой вы, возможно, слышали. Redux не активно применяет неизменность государства в своем магазине или редукторах, эта ответственность ложится на программиста. К счастью, JavaScript (особенно ES6) предоставляет несколько полезных инструментов, которые можно использовать для обеспечения неизменности вашего состояния, будь то string , number , array или object . Обратите внимание, что строки и числа являются примитивными значениями и неизменны по своей природе. Другими словами, 3 всегда 3. Вы не можете изменить значение числа 3. array или object , однако, являются изменяемыми. На практике ваше состояние, вероятно, будет состоять из array или object , поскольку они являются полезными структурами данных для представления многих типов информации.
+
## Instructions
- В редакторе кода есть store и reducer для управления предметами. Завершите запись случая ADD_TO_DO в редукторе, чтобы добавить новое дело в состояние. Есть несколько способов сделать это со стандартным JavaScript или ES6. Посмотрите, можете ли вы найти способ возврата нового массива с элементом из action.todo добавленным в конец.
+
+В редакторе кода есть store и reducer для управления предметами. Завершите запись случая ADD_TO_DO в редукторе, чтобы добавить новое дело в состояние. Есть несколько способов сделать это со стандартным JavaScript или ES6. Посмотрите, можете ли вы найти способ возврата нового массива с элементом из action.todo добавленным в конец.
+
## Tests
```yml
tests:
- - text: 'Хранилище Redux должно существовать и инициализироваться с состоянием, равным массиву todos в редакторе кода.'
- testString: 'assert((function() { const todos = [ "Go to the store", "Clean the house", "Cook dinner", "Learn to code" ]; const initialState = store.getState(); return Array.isArray(initialState) && initialState.join(",") === todos.join(","); })(), "The Redux store should exist and initialize with a state equal to the todos array in the code editor.");'
- - text: addToDo и immutableReducer должны быть функциями.
- testString: 'assert(typeof addToDo === "function" && typeof immutableReducer === "function", "addToDo and immutableReducer both should be functions.");'
- - text: При ADD_TO_DO действия типа ADD_TO_DO в хранилище Redux следует добавить объект todo и НЕ должен мутировать состояние.
- testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo("__TEST__TO__DO__")); const finalState = store.getState(); const expectedState = [ "Go to the store", "Clean the house", "Cook dinner", "Learn to code", "__TEST__TO__DO__" ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), "Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state.");'
+ - text: The Redux store should exist and initialize with a state equal to the todos array in the code editor.
+ testString: assert((function() { const todos = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code' ]; const initialState = store.getState(); return Array.isArray(initialState) && initialState.join(',') === todos.join(','); })());
+ - text: addToDo and immutableReducer both should be functions.
+ testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
+ - text: Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state.
+ testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })());
```
@@ -69,14 +73,40 @@ const store = Redux.createStore(immutableReducer);
-
-
## Solution
-```js
-// solution required
+```jsx
+const ADD_TO_DO = 'ADD_TO_DO';
+
+// A list of strings representing tasks to do:
+const todos = [
+ 'Go to the store',
+ 'Clean the house',
+ 'Cook dinner',
+ 'Learn to code',
+];
+
+const immutableReducer = (state = todos, action) => {
+ switch(action.type) {
+ case ADD_TO_DO:
+ return state.concat(action.todo);
+ default:
+ return state;
+ }
+};
+
+// an example todo argument would be 'Learn React',
+const addToDo = (todo) => {
+ return {
+ type: ADD_TO_DO,
+ todo
+ }
+}
+
+const store = Redux.createStore(immutableReducer);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/register-a-store-listener.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/register-a-store-listener.russian.md
index 2558f27dd5..13dadb6dbf 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/register-a-store-listener.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/register-a-store-listener.russian.md
@@ -3,27 +3,32 @@ id: 5a24c314108439a4d4036153
title: Register a Store Listener
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301446
localeTitle: Регистрация слушателя хранилища
---
## Description
- Другой метод, к которому у вас есть доступ из Redux store, - это store.subscribe() . Он позволяет вам подписать функции слушателя к хранилищу, которые будут вызываться всякий раз, когда действие отправляется в хранилище. Одним из простых способов использования этого метода является подписка функции на ваше хранилище, которая просто регистрирует сообщение каждый раз, когда принимается действие, и хранилище обновляется.
+
+Другой метод, к которому у вас есть доступ из Redux store, - это store.subscribe() . Он позволяет вам подписать функции слушателя к хранилищу, которые будут вызываться всякий раз, когда действие отправляется в хранилище. Одним из простых способов использования этого метода является подписка функции на ваше хранилище, которая просто регистрирует сообщение каждый раз, когда принимается действие, и хранилище обновляется.
+
## Instructions
- Написать функцию обратного вызова, которая увеличивает значение глобальной переменной count каждый раз, когда хранилище принимает действие, и передать эту функцию в метод store.subscribe() . Вы увидите, что store.dispatch() вызывается три раза подряд, каждый раз непосредственно передавая объект действия. Посмотрите вывод консоли между отправками действия, чтобы увидеть, что обновления происходят.
+
+Написать функцию обратного вызова, которая увеличивает значение глобальной переменной count каждый раз, когда хранилище принимает действие, и передать эту функцию в метод store.subscribe() . Вы увидите, что store.dispatch() вызывается три раза подряд, каждый раз непосредственно передавая объект действия. Посмотрите вывод консоли между отправками действия, чтобы увидеть, что обновления происходят.
+
## Tests
```yml
tests:
- - text: Отправка действия ADD в хранилище должна увеличивать состояние на 1 .
- testString: 'assert((function() { const initialState = store.getState(); store.dispatch({ type: "ADD" }); const newState = store.getState(); return newState === (initialState + 1); })(), "Dispatching the ADD action on the store should increment the state by 1.");'
- - text: 'Должна быть функция слушателя, подписанная на хранилище, используя store.subscribe .'
- testString: 'getUserInput => assert(getUserInput("index").includes("store.subscribe("), "There should be a listener function subscribed to the store using store.subscribe.");'
- - text: Обратный вызов в store.subscribe также должен увеличивать значение глобальной переменной count при обновлении хранилища.
- testString: 'assert(store.getState() === count, "The callback to store.subscribe should also increment the global count variable as the store is updated.");'
+ - text: Dispatching the ADD action on the store should increment the state by 1.
+ testString: 'assert((function() { const initialState = store.getState(); store.dispatch({ type: ''ADD'' }); const newState = store.getState(); return newState === (initialState + 1); })());'
+ - text: There should be a listener function subscribed to the store using store.subscribe.
+ testString: getUserInput => assert(getUserInput('index').includes('store.subscribe('));
+ - text: The callback to store.subscribe should also increment the global count variable as the store is updated.
+ testString: assert(store.getState() === count);
+
```
@@ -47,12 +52,12 @@ const reducer = (state = 0, action) => {
const store = Redux.createStore(reducer);
-// глобальная переменная счётчика:
+// global count variable:
let count = 0;
-// измените код ниже этой линии
+// change code below this line
-// измените код выше этой линии
+// change code above this line
store.dispatch({type: ADD});
console.log(count);
@@ -65,7 +70,7 @@ console.log(count);
-### Before Test
+### Before Tests
```jsx
@@ -75,13 +80,38 @@ count = 0;
-
## Solution
-```js
-// solution required
+```jsx
+const ADD = 'ADD';
+
+const reducer = (state = 0, action) => {
+ switch(action.type) {
+ case ADD:
+ return state + 1;
+ default:
+ return state;
+ }
+};
+
+const store = Redux.createStore(reducer);
+ let count = 0;
+// change code below this line
+
+store.subscribe( () =>
+ {
+ count++;
+ }
+);
+
+// change code above this line
+
+store.dispatch({type: ADD});
+store.dispatch({type: ADD});
+store.dispatch({type: ADD});
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/remove-an-item-from-an-array.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/remove-an-item-from-an-array.russian.md
index 5ed5bab089..91439fb580 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/remove-an-item-from-an-array.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/remove-an-item-from-an-array.russian.md
@@ -3,27 +3,31 @@ id: 5a24c314108439a4d403615a
title: Remove an Item from an Array
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301447
localeTitle: Удалить элемент из массива
---
## Description
- Время практиковать удаление элементов из массива. Здесь также может использоваться оператор распространения. Другие полезные методы JavaScript включают slice() и concat() .
+
+Время практиковать удаление элементов из массива. Здесь также может использоваться оператор распространения. Другие полезные методы JavaScript включают slice() и concat() .
+
## Instructions
- Редуктор и создатель действия были изменены для удаления элемента из массива на основе индекса элемента. Завершите запись редуктора, чтобы новый массив состояний был возвращен с удаленным элементом.
+
+Редуктор и создатель действия были изменены для удаления элемента из массива на основе индекса элемента. Завершите запись редуктора, чтобы новый массив состояний был возвращен с удаленным элементом.
+
## Tests
```yml
tests:
- - text: 'Магазин Redux должен существовать и инициализироваться с состоянием, равным [0,1,2,3,4,5]'
- testString: 'assert((function() { const initialState = store.getState(); return (Array.isArray(initialState) === true && DeepEqual(initialState, [0, 1, 2, 3, 4, 5])); })(), "The Redux store should exist and initialize with a state equal to [0,1,2,3,4,5]");'
- - text: removeItem и immutableReducer должны быть функциями.
- testString: 'assert(typeof removeItem === "function" && typeof immutableReducer === "function", "removeItem and immutableReducer both should be functions.");'
- - text: ''
- testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(removeItem(3)); const state_1 = store.getState(); store.dispatch(removeItem(2)); const state_2 = store.getState(); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); const state_3 = store.getState(); return isFrozen && DeepEqual(state_1, [0, 1, 2, 4, 5]) && DeepEqual(state_2, [0, 1, 4, 5]) && DeepEqual(state_3, [5]); })(), "Dispatching the removeItem action creator should remove items from the state and should NOT mutate state.");'
+ - text: The Redux store should exist and initialize with a state equal to [0,1,2,3,4,5]
+ testString: assert((function() { const initialState = store.getState(); return (Array.isArray(initialState) === true && DeepEqual(initialState, [0, 1, 2, 3, 4, 5])); })());
+ - text: removeItem and immutableReducer both should be functions.
+ testString: assert(typeof removeItem === 'function' && typeof immutableReducer === 'function');
+ - text: Dispatching the removeItem action creator should remove items from the state and should NOT mutate state.
+ testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(removeItem(3)); const state_1 = store.getState(); store.dispatch(removeItem(2)); const state_2 = store.getState(); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); const state_3 = store.getState(); return isFrozen && DeepEqual(state_1, [0, 1, 2, 4, 5]) && DeepEqual(state_2, [0, 1, 4, 5]) && DeepEqual(state_3, [5]); })());
```
@@ -58,14 +62,32 @@ const store = Redux.createStore(immutableReducer);
-
-
## Solution
-```js
-// solution required
+```jsx
+const immutableReducer = (state = [0,1,2,3,4,5], action) => {
+ switch(action.type) {
+ case 'REMOVE_ITEM':
+ return [
+ ...state.slice(0, action.index),
+ ...state.slice(action.index + 1)
+ ];
+ default:
+ return state;
+ }
+};
+
+const removeItem = (index) => {
+ return {
+ type: 'REMOVE_ITEM',
+ index
+ }
+}
+
+const store = Redux.createStore(immutableReducer);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/send-action-data-to-the-store.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/send-action-data-to-the-store.russian.md
index b2d35e1c3e..efc9d3541a 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/send-action-data-to-the-store.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/send-action-data-to-the-store.russian.md
@@ -3,25 +3,31 @@ id: 5a24c314108439a4d4036155
title: Send Action Data to the Store
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301448
localeTitle: Отправка данных о действиях в магазин
---
## Description
-undefined
+
+By now you've learned how to dispatch actions to the Redux store, but so far these actions have not contained any information other than a type. You can also send specific data along with your actions. In fact, this is very common because actions usually originate from some user interaction and tend to carry some data with them. The Redux store often needs to know about this data.
+
## Instructions
-undefined
+
+There's a basic notesReducer() and an addNoteText() action creator defined in the code editor. Finish the body of the addNoteText() function so that it returns an action object. The object should include a type property with a value of ADD_NOTE, and also a text property set to the note data that's passed into the action creator. When you call the action creator, you'll pass in specific note information that you can access for the object.
+Next, finish writing the switch statement in the notesReducer(). You need to add a case that handles the addNoteText() actions. This case should be triggered whenever there is an action of type ADD_NOTE and it should return the text property on the incoming action as the new state.
+The action is dispatched at the bottom of the code. Once you're finished, run the code and watch the console. That's all it takes to send action-specific data to the store and use it when you update store state.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert((function() { const addNoteFn = addNoteText("__TEST__NOTE"); return addNoteFn.type === ADD_NOTE && addNoteFn.text === "__TEST__NOTE" })(), "The action creator addNoteText should return an object with keys type and text.");'
- - text: ''
- testString: 'assert((function() { const initialState = store.getState(); store.dispatch(addNoteText("__TEST__NOTE")); const newState = store.getState(); return initialState !== newState && newState === "__TEST__NOTE" })(), "Dispatching an action of type ADD_NOTE with the addNoteText action creator should update the state to the string passed to the action creator.");'
+ - text: The action creator addNoteText should return an object with keys type and text.
+ testString: assert((function() { const addNoteFn = addNoteText('__TEST__NOTE'); return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE' })());
+ - text: Dispatching an action of type ADD_NOTE with the addNoteText action creator should update the state to the string passed to the action creator.
+ testString: assert((function() { const initialState = store.getState(); store.dispatch(addNoteText('__TEST__NOTE')); const newState = store.getState(); return initialState !== newState && newState === '__TEST__NOTE' })());
```
@@ -61,14 +67,39 @@ console.log(store.getState());
-
-
## Solution
-```js
-// solution required
+```jsx
+const ADD_NOTE = 'ADD_NOTE';
+
+const notesReducer = (state = 'Initial State', action) => {
+ switch(action.type) {
+ // change code below this line
+ case ADD_NOTE:
+ return action.text;
+ // change code above this line
+ default:
+ return state;
+ }
+};
+
+const addNoteText = (note) => {
+ // change code below this line
+ return {
+ type: ADD_NOTE,
+ text: note
+ }
+ // change code above this line
+};
+
+const store = Redux.createStore(notesReducer);
+
+console.log(store.getState());
+store.dispatch(addNoteText('Hello Redux!'));
+console.log(store.getState());
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.russian.md
index 76bd68a218..b192b8c70d 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.russian.md
@@ -3,33 +3,37 @@ id: 5a24c314108439a4d4036151
title: Use a Switch Statement to Handle Multiple Actions
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301449
localeTitle: Использование инструкции Switch для обработки нескольких действий
---
## Description
- Вы можете сказать хранилищу Redux, как обрабатывать несколько типов действий. Предположим, что вы управляете аутентификацией пользователя в своем хранилище Redux. Вы хотите,чтобы у вас было состояние, показывающее когда пользователи вошли в систему и когда они вышли из системы. Вы представляете это единственным объектом состояния со свойством authenticated. Вам также нужны создатели действий, которые создают действия, отвечающие за вход пользователя и за выход пользователя из системы, а также сами объекты действий.
+
+Вы можете сказать хранилищу Redux, как обрабатывать несколько типов действий. Предположим, что вы управляете аутентификацией пользователя в своем хранилище Redux. Вы хотите,чтобы у вас было состояние, показывающее когда пользователи вошли в систему и когда они вышли из системы. Вы представляете это единственным объектом состояния со свойством authenticated. Вам также нужны создатели действий, которые создают действия, отвечающие за вход пользователя и за выход пользователя из системы, а также сами объекты действий.
+
## Instructions
- В редакторе кода для вас уже описаны хранилище, действия и создатели действия. Заполните функцию reducer для обработки различных действий аутентификации. Используйте JavaScript оператор switch в reducer чтобы реагировать на различные события действий. Это стандартный паттерн при описание редукторов Redux. Оператор switch должен переключаться между action.type и возвращать соответствующее состояние аутентификации. Примечание. На этом этапе не беспокойтесь о неизменности состояния, поскольку это маленький и простой пример. Для каждого действия вы можете вернуть новый объект - например, {authenticated: true} . Кроме того, не забудьте написать случай по умолчанию default в вашем операторе switch, который возвращает текущее state . Это важно, потому что когда в вашем приложении несколько редукторов, все они запускаются, когда происходит отправка действий, даже если действие не связано с этим редуктором. В таком случае вы хотите убедиться, что вы вернете текущее state .
+
+В редакторе кода для вас уже описаны хранилище, действия и создатели действия. Заполните функцию reducer для обработки различных действий аутентификации. Используйте JavaScript оператор switch в reducer чтобы реагировать на различные события действий. Это стандартный паттерн при описание редукторов Redux. Оператор switch должен переключаться между action.type и возвращать соответствующее состояние аутентификации. Примечание. На этом этапе не беспокойтесь о неизменности состояния, поскольку это маленький и простой пример. Для каждого действия вы можете вернуть новый объект - например, {authenticated: true} . Кроме того, не забудьте написать случай по умолчанию default в вашем операторе switch, который возвращает текущее state . Это важно, потому что когда в вашем приложении несколько редукторов, все они запускаются, когда происходит отправка действий, даже если действие не связано с этим редуктором. В таком случае вы хотите убедиться, что вы вернете текущее state .
+
## Tests
```yml
tests:
- - text: 'Вызов функции loginUser должен вернуть объект со свойством type, установленным в строковое значение LOGIN .'
- testString: 'assert(loginUser().type === "LOGIN", "Calling the function loginUser should return an object with type property set to the string LOGIN.");'
- - text: 'Вызов функции logoutUser должен вернуть объект со свойством type, установленным в строковое значение LOGOUT .'
- testString: 'assert(logoutUser().type === "LOGOUT", "Calling the function logoutUser should return an object with type property set to the string LOGOUT.");'
- - text: 'Хранилище должно быть инициализировано объектом со свойством authenticated , установленным в false .'
- testString: 'assert(store.getState().authenticated === false, "The store should be initialized with an object with an authenticated property set to false.");'
- - text: Отправка loginUser должна обновить authenticated свойство в состоянии хранилища на true .
- testString: 'assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), "Dispatching loginUser should update the authenticated property in the store state to true.");'
- - text: Отправка logoutUser должна обновить authenticated свойство в состоянии хранилища на false .
- testString: 'assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })(), "Dispatching logoutUser should update the authenticated property in the store state to false.");'
- - text: Функция authReducer должна обрабатывать разные типы действий с помощью оператора switch .
- testString: 'getUserInput => assert( getUserInput("index").toString().includes("switch") && getUserInput("index").toString().includes("case") && getUserInput("index").toString().includes("default"), "The authReducer function should handle multiple action types with a switch statement.");'
+ - text: Calling the function loginUser should return an object with type property set to the string LOGIN.
+ testString: assert(loginUser().type === 'LOGIN');
+ - text: Calling the function logoutUser should return an object with type property set to the string LOGOUT.
+ testString: assert(logoutUser().type === 'LOGOUT');
+ - text: The store should be initialized with an object with an authenticated property set to false.
+ testString: assert(store.getState().authenticated === false);
+ - text: Dispatching loginUser should update the authenticated property in the store state to true.
+ testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })());
+ - text: Dispatching logoutUser should update the authenticated property in the store state to false.
+ testString: assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })());
+ - text: The authReducer function should handle multiple action types with a switch statement.
+ testString: getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default'));
```
@@ -46,9 +50,9 @@ const defaultState = {
};
const authReducer = (state = defaultState, action) => {
- // измените код ниже этой линии
+ // change code below this line
- // измените код выше этой линии
+ // change code above this line
};
const store = Redux.createStore(authReducer);
@@ -69,14 +73,50 @@ const logoutUser = () => {
-
-
## Solution
-```js
-// solution required
+```jsx
+const defaultState = {
+ authenticated: false
+};
+
+const authReducer = (state = defaultState, action) => {
+
+ switch (action.type) {
+
+ case 'LOGIN':
+ return {
+ authenticated: true
+ }
+
+ case 'LOGOUT':
+ return {
+ authenticated: false
+ }
+
+ default:
+ return state;
+
+ }
+
+};
+
+const store = Redux.createStore(authReducer);
+
+const loginUser = () => {
+ return {
+ type: 'LOGIN'
+ }
+};
+
+const logoutUser = () => {
+ return {
+ type: 'LOGOUT'
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/use-const-for-action-types.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/use-const-for-action-types.russian.md
index b5a7b4c449..ecc3813c16 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/use-const-for-action-types.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/use-const-for-action-types.russian.md
@@ -3,37 +3,41 @@ id: 5a24c314108439a4d4036152
title: Use const for Action Types
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301450
localeTitle: Использование констант для типов действий
---
## Description
- Общей практикой при работе с Redux является присваивать типы действий константам, а затем ссылаться на эти константы везде, где они используются. Вы можете реорганизовать код, с которым работаете, чтобы описать типы действий константами const .
+
+Общей практикой при работе с Redux является присваивать типы действий константам, а затем ссылаться на эти константы везде, где они используются. Вы можете реорганизовать код, с которым работаете, чтобы описать типы действий константами const .
+
## Instructions
- Объявите LOGIN и LOGOUT как константы const и присвойте им строковые значения 'LOGIN' и 'LOGOUT' соответственно. Затем отредактируйте authReducer() и создателей действия, чтобы они ссылались на эти константы вместо строковых значений. Примечание. Обычно принято писать константы прописными буквами, и это стандартная практика в Redux.
+
+Объявите LOGIN и LOGOUT как константы const и присвойте им строковые значения 'LOGIN' и 'LOGOUT' соответственно. Затем отредактируйте authReducer() и создателей действия, чтобы они ссылались на эти константы вместо строковых значений. Примечание. Обычно принято писать константы прописными буквами, и это стандартная практика в Redux.
+
## Tests
```yml
tests:
- - text: Вызов функции loginUser должен вернуть объект со свойством type , установленным в строку LOGIN .
- testString: 'assert(loginUser().type === "LOGIN", "Calling the function loginUser should return an object with type property set to the string LOGIN.");'
- - text: Вызов функции logoutUser должен вернуть объект со свойством type , установленным в строку LOGOUT .
- testString: 'assert(logoutUser().type === "LOGOUT", "Calling the function logoutUser should return an object with type property set to the string LOGOUT.");'
- - text: Хранилище должно быть инициализировано объектом с идентификатором login , установленным в значение false .
- testString: 'assert(store.getState().authenticated === false, "The store should be initialized with an object with property login set to false.");'
- - text: Отправка loginUser должна обновить свойство login в состоянии хранилища до true .
- testString: 'assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), "Dispatching loginUser should update the login property in the store state to true.");'
- - text: Отправка logoutUser должна обновить свойство login в состоянии хранилища до false .
- testString: 'assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })(), "Dispatching logoutUser should update the login property in the store state to false.");'
- - text: Функция authReducer должна обрабатывать разные типы действий с помощью оператора switch.
- testString: 'getUserInput => assert((function() { return typeof authReducer === "function" && getUserInput("index").toString().includes("switch") && getUserInput("index").toString().includes("case") && getUserInput("index").toString().includes("default") })(), "The authReducer function should handle multiple action types with a switch statement.");'
- - text: LOGIN и LOGOUT должны быть объявлены как значения const и должны быть проинициализированы строками LOGIN и LOGOUT .
- testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").toString().replace(/\s/g,""); return (noWhiteSpace.includes("constLOGIN=\"LOGIN\"") || noWhiteSpace.includes("constLOGIN="LOGIN"")) && (noWhiteSpace.includes("constLOGOUT=\"LOGOUT\"") || noWhiteSpace.includes("constLOGOUT="LOGOUT"")) })(), "LOGIN and LOGOUT should be declared as const values and should be assigned strings of LOGINand LOGOUT.");'
- - text: Создатели действий и редуктор должны ссылаться на константы LOGIN и LOGOUT .
- testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").toString().replace(/\s/g,""); return noWhiteSpace.includes("caseLOGIN:") && noWhiteSpace.includes("caseLOGOUT:") && noWhiteSpace.includes("type:LOGIN") && noWhiteSpace.includes("type:LOGOUT") })(), "The action creators and the reducer should reference the LOGIN and LOGOUT constants.");'
+ - text: Calling the function loginUser should return an object with type property set to the string LOGIN.
+ testString: assert(loginUser().type === 'LOGIN');
+ - text: Calling the function logoutUser should return an object with type property set to the string LOGOUT.
+ testString: assert(logoutUser().type === 'LOGOUT');
+ - text: The store should be initialized with an object with property login set to false.
+ testString: assert(store.getState().authenticated === false);
+ - text: Dispatching loginUser should update the login property in the store state to true.
+ testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })());
+ - text: Dispatching logoutUser should update the login property in the store state to false.
+ testString: assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })());
+ - text: The authReducer function should handle multiple action types with a switch statement.
+ testString: getUserInput => assert((function() { return typeof authReducer === 'function' && getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default') })());
+ - text: LOGIN and LOGOUT should be declared as const values and should be assigned strings of LOGINand LOGOUT.
+ testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').toString().replace(/\s/g,''); return (noWhiteSpace.includes('constLOGIN=\'LOGIN\'') || noWhiteSpace.includes('constLOGIN="LOGIN"')) && (noWhiteSpace.includes('constLOGOUT=\'LOGOUT\'') || noWhiteSpace.includes('constLOGOUT="LOGOUT"')) })());
+ - text: The action creators and the reducer should reference the LOGIN and LOGOUT constants.
+ testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').toString().replace(/\s/g,''); return noWhiteSpace.includes('caseLOGIN:') && noWhiteSpace.includes('caseLOGOUT:') && noWhiteSpace.includes('type:LOGIN') && noWhiteSpace.includes('type:LOGOUT') })());
```
@@ -45,9 +49,9 @@ tests:
```jsx
-// измените код ниже этой линии
+// change code below this line
-// измените код выше этой линии
+// change code above this line
const defaultState = {
authenticated: false
@@ -92,14 +96,53 @@ const logoutUser = () => {
-
-
## Solution
-```js
-// solution required
+```jsx
+const LOGIN = 'LOGIN';
+const LOGOUT = 'LOGOUT';
+
+const defaultState = {
+ authenticated: false
+};
+
+const authReducer = (state = defaultState, action) => {
+
+ switch (action.type) {
+
+ case LOGIN:
+ return {
+ authenticated: true
+ }
+
+ case LOGOUT:
+ return {
+ authenticated: false
+ }
+
+ default:
+ return state;
+
+ }
+
+};
+
+const store = Redux.createStore(authReducer);
+
+const loginUser = () => {
+ return {
+ type: LOGIN
+ }
+};
+
+const logoutUser = () => {
+ return {
+ type: LOGOUT
+ }
+};
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.russian.md
index 1fdeb043b4..38f42c7ca7 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.russian.md
@@ -3,31 +3,35 @@ id: 5a24c314108439a4d4036156
title: Use Middleware to Handle Asynchronous Actions
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301451
localeTitle: Использование промежуточного программного обеспечения для обработки асинхронных действий
---
## Description
- До сих пор эти проблемы избегали обсуждения асинхронных действий, но они являются неотъемлемой частью веб-разработки. В какой-то момент вам нужно будет вызывать асинхронные конечные точки в вашем приложении Redux, так как вы обрабатываете эти типы запросов? Redux обеспечивает промежуточное программное обеспечение, разработанное специально для этой цели, называемое промежуточным программным обеспечением Redux Thunk. Вот краткое описание того, как использовать это с Redux. Чтобы включить промежуточное ПО Redux Thunk, вы передаете его в качестве аргумента для Redux.applyMiddleware() . Затем этот оператор предоставляется в качестве второго необязательного параметра функции createStore() . Посмотрите на код внизу редактора, чтобы увидеть это. Затем, чтобы создать асинхронное действие, вы возвращаете функцию в создателе действия, который принимает dispatch в качестве аргумента. В рамках этой функции вы можете отправлять действия и выполнять асинхронные запросы. В этом примере асинхронный запрос моделируется с помощью вызова setTimeout() . Обычно перед отправкой какого-либо асинхронного поведения вы отправляете какое-либо действие, чтобы ваше состояние приложения знало, что запрашиваются некоторые данные (например, это состояние может отображать значок загрузки). Затем, как только вы получите данные, вы отправите другое действие, которое несет данные как полезную нагрузку вместе с информацией о завершении действия. Помните, что вы dispatch в качестве параметра этому создателю специальных действий. Это то, что вы будете использовать для отправки ваших действий, вы просто передаете действие непосредственно для отправки, а промежуточное ПО заботится обо всем остальном.
+
+До сих пор эти проблемы избегали обсуждения асинхронных действий, но они являются неотъемлемой частью веб-разработки. В какой-то момент вам нужно будет вызывать асинхронные конечные точки в вашем приложении Redux, так как вы обрабатываете эти типы запросов? Redux обеспечивает промежуточное программное обеспечение, разработанное специально для этой цели, называемое промежуточным программным обеспечением Redux Thunk. Вот краткое описание того, как использовать это с Redux. Чтобы включить промежуточное ПО Redux Thunk, вы передаете его в качестве аргумента для Redux.applyMiddleware() . Затем этот оператор предоставляется в качестве второго необязательного параметра функции createStore() . Посмотрите на код внизу редактора, чтобы увидеть это. Затем, чтобы создать асинхронное действие, вы возвращаете функцию в создателе действия, который принимает dispatch в качестве аргумента. В рамках этой функции вы можете отправлять действия и выполнять асинхронные запросы. В этом примере асинхронный запрос моделируется с помощью вызова setTimeout() . Обычно перед отправкой какого-либо асинхронного поведения вы отправляете какое-либо действие, чтобы ваше состояние приложения знало, что запрашиваются некоторые данные (например, это состояние может отображать значок загрузки). Затем, как только вы получите данные, вы отправите другое действие, которое несет данные как полезную нагрузку вместе с информацией о завершении действия. Помните, что вы dispatch в качестве параметра этому создателю специальных действий. Это то, что вы будете использовать для отправки ваших действий, вы просто передаете действие непосредственно для отправки, а промежуточное ПО заботится обо всем остальном.
+
## Instructions
- Напишите оба отправления в создателе handleAsync() . Отправка requestingData() перед setTimeout() (имитированный вызов API). Затем, после получения (притворяются) данных, отправьте receivedData() действиеData receivedData() , передав эти данные. Теперь вы знаете, как обрабатывать асинхронные действия в Redux. Все остальное продолжает вести себя по-прежнему.
+
+Напишите оба отправления в создателе handleAsync() . Отправка requestingData() перед setTimeout() (имитированный вызов API). Затем, после получения (притворяются) данных, отправьте receivedData() действиеData receivedData() , передав эти данные. Теперь вы знаете, как обрабатывать асинхронные действия в Redux. Все остальное продолжает вести себя по-прежнему.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert(requestingData().type === REQUESTING_DATA, "The requestingData action creator should return an object of type equal to the value of REQUESTING_DATA.");'
- - text: ''
- testString: 'assert(receivedData("data").type === RECEIVED_DATA, "The receivedData action creator should return an object of type equal to the value of RECEIVED_DATA.");'
- - text: asyncDataReducer должен быть функцией.
- testString: 'assert(typeof asyncDataReducer === "function", "asyncDataReducer should be a function.");'
- - text: ''
- testString: 'assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })(), "Dispatching the requestingData action creator should update the store state property of fetching to true.");'
- - text: ''
- testString: 'assert((function() { const noWhiteSpace = handleAsync.toString().replace(/\s/g,""); return noWhiteSpace.includes("dispatch(requestingData())") === true && noWhiteSpace.includes("dispatch(receivedData(data))") === true })(), "Dispatching handleAsync should dispatch the data request action and then dispatch the received data action after a delay.");'
+ - text: The requestingData action creator should return an object of type equal to the value of REQUESTING_DATA.
+ testString: assert(requestingData().type === REQUESTING_DATA);
+ - text: The receivedData action creator should return an object of type equal to the value of RECEIVED_DATA.
+ testString: assert(receivedData('data').type === RECEIVED_DATA);
+ - text: asyncDataReducer should be a function.
+ testString: assert(typeof asyncDataReducer === 'function');
+ - text: Dispatching the requestingData action creator should update the store state property of fetching to true.
+ testString: assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })());
+ - text: Dispatching handleAsync should dispatch the data request action and then dispatch the received data action after a delay.
+ testString: assert((function() { const noWhiteSpace = handleAsync.toString().replace(/\s/g,''); return noWhiteSpace.includes('dispatch(requestingData())') === true && noWhiteSpace.includes('dispatch(receivedData(data))') === true })());
```
@@ -90,14 +94,56 @@ const store = Redux.createStore(
-
-
## Solution
-```js
-// solution required
+```jsx
+const REQUESTING_DATA = 'REQUESTING_DATA'
+const RECEIVED_DATA = 'RECEIVED_DATA'
+
+const requestingData = () => { return {type: REQUESTING_DATA} }
+const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }
+
+const handleAsync = () => {
+ return function(dispatch) {
+ dispatch(requestingData());
+ setTimeout(function() {
+ let data = {
+ users: ['Jeff', 'William', 'Alice']
+ }
+ dispatch(receivedData(data));
+ }, 2500);
+ }
+};
+
+const defaultState = {
+ fetching: false,
+ users: []
+};
+
+const asyncDataReducer = (state = defaultState, action) => {
+ switch(action.type) {
+ case REQUESTING_DATA:
+ return {
+ fetching: true,
+ users: []
+ }
+ case RECEIVED_DATA:
+ return {
+ fetching: false,
+ users: action.users
+ }
+ default:
+ return state;
+ }
+};
+
+const store = Redux.createStore(
+ asyncDataReducer,
+ Redux.applyMiddleware(ReduxThunk.default)
+);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.russian.md
index c727802c33..1d47fe4524 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.russian.md
@@ -3,29 +3,33 @@ id: 5a24c314108439a4d4036159
title: Use the Spread Operator on Arrays
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301452
localeTitle: Использование оператора спреда на массивах
---
## Description
- Одним из решений ES6, чтобы помочь обеспечить неизменность состояния в Redux, является оператор с расширением: ... Оператор распространения имеет множество приложений, один из которых хорошо подходит для предыдущего вызова создания нового массива из существующего массива. Это относительно новый, но обычно используемый синтаксис. Например, если у вас есть массив myArray и напишите: let newArray = [...myArray];newArray теперь является клоном myArray . Оба массива все еще существуют отдельно в памяти. Если вы выполняете мутацию типа newArray.push(5) , myArray не изменяется. ... эффективно распространяет значения в myArray в новый массив. Чтобы клонировать массив, но добавляя дополнительные значения в новый массив, вы можете написать [...myArray, 'new value'] . Это вернет новый массив, состоящий из значений в myArray и строку 'new value' в качестве последнего значения. Синтаксис распространения может использоваться несколько раз в составе массива, как это, но важно отметить, что он делает только мелкую копию массива. То есть он обеспечивает только неизменные операции массива для одномерных массивов.
+
+Одним из решений ES6, чтобы помочь обеспечить неизменность состояния в Redux, является оператор с расширением: ... Оператор распространения имеет множество приложений, один из которых хорошо подходит для предыдущего вызова создания нового массива из существующего массива. Это относительно новый, но обычно используемый синтаксис. Например, если у вас есть массив myArray и напишите: let newArray = [...myArray];newArray теперь является клоном myArray . Оба массива все еще существуют отдельно в памяти. Если вы выполняете мутацию типа newArray.push(5) , myArray не изменяется. ... эффективно распространяет значения в myArray в новый массив. Чтобы клонировать массив, но добавляя дополнительные значения в новый массив, вы можете написать [...myArray, 'new value'] . Это вернет новый массив, состоящий из значений в myArray и строку 'new value' в качестве последнего значения. Синтаксис распространения может использоваться несколько раз в составе массива, как это, но важно отметить, что он делает только мелкую копию массива. То есть он обеспечивает только неизменные операции массива для одномерных массивов.
+
## Instructions
- Используйте оператор spread, чтобы вернуть новую копию состояния при добавлении дела.
+
+Используйте оператор spread, чтобы вернуть новую копию состояния при добавлении дела.
+
## Tests
```yml
tests:
- - text: 'Магазин Redux должен существовать и инициализироваться с состоянием, равным [Do not mutate state!] .'
- testString: 'assert((function() { const initialState = store.getState(); return ( Array.isArray(initialState) === true && initialState[0] === "Do not mutate state!"); })(), "The Redux store should exist and initialize with a state equal to [Do not mutate state!].");'
- - text: addToDo и immutableReducer должны быть функциями.
- testString: 'assert(typeof addToDo === "function" && typeof immutableReducer === "function", "addToDo and immutableReducer both should be functions.");'
- - text: При ADD_TO_DO действия типа ADD_TO_DO в хранилище Redux следует добавить объект todo и НЕ должен мутировать состояние.
- testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo("__TEST__TO__DO__")); const finalState = store.getState(); const expectedState = [ "Do not mutate state!", "__TEST__TO__DO__" ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), "Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state.");'
- - text: Оператор распространения должен использоваться для возврата нового состояния.
- testString: 'getUserInput => assert(getUserInput("index").includes("...state"), "The spread operator should be used to return new state.");'
+ - text: The Redux store should exist and initialize with a state equal to [Do not mutate state!].
+ testString: assert((function() { const initialState = store.getState(); return ( Array.isArray(initialState) === true && initialState[0] === 'Do not mutate state!'); })());
+ - text: addToDo and immutableReducer both should be functions.
+ testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
+ - text: Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state.
+ testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Do not mutate state!', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })());
+ - text: The spread operator should be used to return new state.
+ testString: getUserInput => assert(getUserInput('index').includes('...state'));
```
@@ -60,14 +64,32 @@ const store = Redux.createStore(immutableReducer);
-
-
## Solution
-```js
-// solution required
+```jsx
+const immutableReducer = (state = ['Do not mutate state!'], action) => {
+ switch(action.type) {
+ case 'ADD_TO_DO':
+ return [
+ ...state,
+ action.todo
+ ];
+ default:
+ return state;
+ }
+};
+
+const addToDo = (todo) => {
+ return {
+ type: 'ADD_TO_DO',
+ todo
+ }
+}
+
+const store = Redux.createStore(immutableReducer);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/redux/write-a-counter-with-redux.russian.md b/curriculum/challenges/russian/03-front-end-libraries/redux/write-a-counter-with-redux.russian.md
index 6c07668cbf..42df228b47 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/redux/write-a-counter-with-redux.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/redux/write-a-counter-with-redux.russian.md
@@ -3,33 +3,37 @@ id: 5a24c314108439a4d4036157
title: Write a Counter with Redux
challengeType: 6
isRequired: false
-videoUrl: ''
+forumTopicId: 301453
localeTitle: Написание счетчика с помощью Redux
---
## Description
- Теперь вы узнали все основные принципы Redux! Вы видели, как создавать действия и создателей действия, создавать хранилище Redux, отправлять ваши действия в хранилище и разрабатывать обновления состояния с помощью чистых редукторов. Вы даже видели, как управлять сложным состоянием с композицией редукторов и обрабатывать асинхронные действия. Эти примеры упрощены, но эти концепции являются основными принципами Redux. Если вы их хорошо понимаете, вы готовы приступить к созданию своего собственного приложения Redux. Следующие упражнения охватывают некоторые детали, касающиеся неизменности state , но сначала рассмотрим все, что вы изучили до сих пор.
+
+Теперь вы узнали все основные принципы Redux! Вы видели, как создавать действия и создателей действия, создавать хранилище Redux, отправлять ваши действия в хранилище и разрабатывать обновления состояния с помощью чистых редукторов. Вы даже видели, как управлять сложным состоянием с композицией редукторов и обрабатывать асинхронные действия. Эти примеры упрощены, но эти концепции являются основными принципами Redux. Если вы их хорошо понимаете, вы готовы приступить к созданию своего собственного приложения Redux. Следующие упражнения охватывают некоторые детали, касающиеся неизменности state , но сначала рассмотрим все, что вы изучили до сих пор.
+
## Instructions
- В этом уроке вы будете реализовывать простой счетчик с помощью Redux с нуля. Основы представлены в редакторе кода, но вам нужно будет заполнить детали! Используйте имена, которые предоставлены и опишите создателей действий incAction и decAction , редуктор counterReducer() , типы действий INCREMENT и DECREMENT , и, наконец, Redux хранилище store . После того, как вы закончите , вы должны смочь отправить действия INCREMENT или DECREMENT для увеличения или уменьшения состояния в хранилище store . Удачи в создании вашего первого приложения Redux!
+
+В этом уроке вы будете реализовывать простой счетчик с помощью Redux с нуля. Основы представлены в редакторе кода, но вам нужно будет заполнить детали! Используйте имена, которые предоставлены и опишите создателей действий incAction и decAction , редуктор counterReducer() , типы действий INCREMENT и DECREMENT , и, наконец, Redux хранилище store . После того, как вы закончите , вы должны смочь отправить действия INCREMENT или DECREMENT для увеличения или уменьшения состояния в хранилище store . Удачи в создании вашего первого приложения Redux!
+
## Tests
```yml
tests:
- - text: Создатель действия incAction должен возвращать объект действия с type равным значению INCREMENT
- testString: 'assert(incAction().type ===INCREMENT, "The action creator incAction should return an action object with type equal to the value of INCREMENT");'
- - text: Создатель действия decAction должен возвращать объект действия с type равным значению DECREMENT
- testString: 'assert(decAction().type === DECREMENT, "The action creator decAction should return an action object with type equal to the value of DECREMENT");'
- - text: Хранилище Redux должно инициализироваться состоянием state равным 0.
- testString: 'assert(store.getState() === 0, "The Redux store should initialize with a state of 0.");'
- - text: Отправка incAction в хранилище Redux должна увеличивать state на 1.
- testString: 'assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })(), "Dispatching incAction on the Redux store should increment the state by 1.");'
- - text: Отправка decAction в хранилище Redux должна уменьшать state на 1.
- testString: 'assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })(), "Dispatching decAction on the Redux store should decrement the state by 1.");'
- - text: counterReducer должен быть функцией
- testString: 'assert(typeof counterReducer === "function", "counterReducer should be a function");'
+ - text: The action creator incAction should return an action object with type equal to the value of INCREMENT
+ testString: assert(incAction().type ===INCREMENT);
+ - text: The action creator decAction should return an action object with type equal to the value of DECREMENT
+ testString: assert(decAction().type === DECREMENT);
+ - text: The Redux store should initialize with a state of 0.
+ testString: assert(store.getState() === 0);
+ - text: Dispatching incAction on the Redux store should increment the state by 1.
+ testString: assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })());
+ - text: Dispatching decAction on the Redux store should decrement the state by 1.
+ testString: assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })());
+ - text: counterReducer should be a function
+ testString: assert(typeof counterReducer === 'function');
```
@@ -41,29 +45,54 @@ tests:
```jsx
-const INCREMENT = null; // определите константу для типа действия увеличения
-const DECREMENT = null; // определите константу для типа действия уменьшения
+const INCREMENT = null; // define a constant for increment action types
+const DECREMENT = null; // define a constant for decrement action types
-const counterReducer = null; // определите редуктор счётчика, который будет увеличивать или уменьшать состояние в зависимости от переданного действия
+const counterReducer = null; // define the counter reducer which will increment or decrement the state based on the action it receives
-const incAction = null; // определите создателя действия для увеличения
+const incAction = null; // define an action creator for incrementing
-const decAction = null; // определите создателя действия для уменьшения
+const decAction = null; // define an action creator for decrementing
-const store = null; // определите хранилище Redux, передав в него ваши редукторы
+const store = null; // define the Redux store here, passing in your reducers
```
-
-
## Solution
-```js
-// solution required
+```jsx
+const INCREMENT = 'INCREMENT';
+const DECREMENT = 'DECREMENT';
+
+const counterReducer = (state = 0, action) => {
+ switch(action.type) {
+ case INCREMENT:
+ return state + 1;
+ case DECREMENT:
+ return state - 1;
+ default:
+ return state;
+ }
+};
+
+const incAction = () => {
+ return {
+ type: INCREMENT
+ }
+};
+
+const decAction = () => {
+ return {
+ type: DECREMENT
+ }
+};
+
+const store = Redux.createStore(counterReducer);
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.russian.md
index 6bb361c335..8ab0450c0a 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.russian.md
@@ -2,47 +2,41 @@
id: 587d7dbf367417b2b2512bbb
title: Apply a Style Until a Condition is Met with @while
challengeType: 0
-videoUrl: ''
-localeTitle: 'Применить стиль до тех пор, пока условие не встретится с @while'
+forumTopicId: 301454
+localeTitle: Применить стиль до тех пор, пока условие не встретится с @while
---
## Description
-@while директива является вариантом с аналогичной функциональностью на JavaScript в while цикл. Он создает правила CSS до тех пор, пока не будет выполнено условие. Задача @for привела пример создания простой сетки. Это также может работать с @while .
Сначала определите переменную $x и установите ее в 1. Затем используйте директиву @while для создания сетки, а$x меньше 13. После установки правила CSS для width$x увеличивается на 1, чтобы избежать бесконечная петля.
+
+@while директива является вариантом с аналогичной функциональностью на JavaScript в while цикл. Он создает правила CSS до тех пор, пока не будет выполнено условие. Задача @for привела пример создания простой сетки. Это также может работать с @while .
Сначала определите переменную $x и установите ее в 1. Затем используйте директиву @while для создания сетки, а$x меньше 13. После установки правила CSS для width$x увеличивается на 1, чтобы избежать бесконечная петля.
+
## Instructions
- Используйте @while для создания серии классов с разными font-sizes . Должно быть 10 разных классов из text-1 в text-10 . Затем установите font-size в 5px, умноженный на текущий номер индекса. Обязательно избегайте бесконечного цикла!
+
+Используйте @while для создания серии классов с разными font-sizes . Должно быть 10 разных классов из text-1 в text-10 . Затем установите font-size в 5px, умноженный на текущий номер индекса. Обязательно избегайте бесконечного цикла!
+
## Tests
```yml
tests:
- - text: Ваш код должен использовать директиву @while .
- testString: 'assert(code.match(/@while /g), "Your code should use the @while directive.");'
- - text: Ваш код должен установить индексную переменную в 1 для запуска.
- testString: 'assert(code.match(/\$.*:\s*?1;/gi), "Your code should set an index variable to 1 to start.");'
- - text: Ваш код должен увеличивать счетчик.
- testString: 'assert(code.match(/\$(.*):\s*?\$\1\s*?\+\s*?1;/gi), "Your code should increment the counter variable.");'
- - text: Класс .text-1 должен иметь font-size 5 пикселей.
- testString: 'assert($(".text-1").css("font-size") == "5px", "Your .text-1 class should have a font-size of 5px.");'
- - text: Класс .text-2 должен иметь font-size 10px.
- testString: 'assert($(".text-2").css("font-size") == "10px", "Your .text-2 class should have a font-size of 10px.");'
- - text: Класс .text-3 должен иметь font-size 15px.
- testString: 'assert($(".text-3").css("font-size") == "15px", "Your .text-3 class should have a font-size of 15px.");'
- - text: Класс .text-4 должен иметь font-size 20px.
- testString: 'assert($(".text-4").css("font-size") == "20px", "Your .text-4 class should have a font-size of 20px.");'
- - text: Класс .text-5 должен иметь font-size 25px.
- testString: 'assert($(".text-5").css("font-size") == "25px", "Your .text-5 class should have a font-size of 25px.");'
- - text: Класс .text-6 должен иметь font-size 30px.
- testString: 'assert($(".text-6").css("font-size") == "30px", "Your .text-6 class should have a font-size of 30px.");'
- - text: Класс .text-7 должен иметь font-size 35 пикселей.
- testString: 'assert($(".text-7").css("font-size") == "35px", "Your .text-7 class should have a font-size of 35px.");'
- - text: Класс .text-8 должен иметь font-size 40 пикселей.
- testString: 'assert($(".text-8").css("font-size") == "40px", "Your .text-8 class should have a font-size of 40px.");'
- - text: Класс .text-9 должен иметь font-size 45 пикселей.
- testString: 'assert($(".text-9").css("font-size") == "45px", "Your .text-9 class should have a font-size of 45px.");'
- - text: Класс .text-10 должен иметь font-size 50 пикселей.
- testString: 'assert($(".text-10").css("font-size") == "50px", "Your .text-10 class should have a font-size of 50px.");'
+ - text: Your code should use the @while directive.
+ testString: assert(code.match(/@while /g));
+ - text: Your code should use an index variable which starts at an index of 1.
+ testString: assert(code.match(/\$.*:\s*?1;/gi));
+ - text: Your code should increment the counter variable.
+ testString: assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
+ - text: Your .text-1 class should have a font-size of 15px.
+ testString: assert($('.text-1').css('font-size') == '15px');
+ - text: Your .text-2 class should have a font-size of 30px.
+ testString: assert($('.text-2').css('font-size') == '30px');
+ - text: Your .text-3 class should have a font-size of 45px.
+ testString: assert($('.text-3').css('font-size') == '45px');
+ - text: Your .text-4 class should have a font-size of 60px.
+ testString: assert($('.text-4').css('font-size') == '60px');
+ - text: Your .text-5 class should have a font-size of 75px.
+ testString: assert($('.text-5').css('font-size') == '75px');
```
@@ -65,24 +59,32 @@ tests:
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/create-reusable-css-with-mixins.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/create-reusable-css-with-mixins.russian.md
index bc37f528ff..1a15a89e0c 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/create-reusable-css-with-mixins.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/create-reusable-css-with-mixins.russian.md
@@ -2,33 +2,37 @@
id: 587d7dbd367417b2b2512bb6
title: Create Reusable CSS with Mixins
challengeType: 0
-videoUrl: ''
+forumTopicId: 301455
localeTitle: Создать многоразовый CSS с помощью Mixins
---
## Description
- В Sass mixin представляет собой группу объявлений CSS, которые можно использовать повторно в таблице стилей. Новые функции CSS требуют времени, прежде чем они будут полностью приняты и готовы к использованию во всех браузерах. По мере добавления функций в браузеры, правила CSS, использующие их, могут потребоваться префиксы поставщиков. Рассмотрим «box-shadow»:
Очень много нужно переписать это правило для всех элементов, у которых есть box-shadow , или изменить каждое значение для проверки различных эффектов. Mixins похожи на функции CSS. Вот как написать один:
@mixin box-shadow ($ x, $ y, $ blur, $ c) { -webkit-box-shadow: $ x, $ y, $ blur, $ c; -moz-box-shadow: $ x, $ y, $ blur, $ c; -ms-box-shadow: $ x, $ y, $ blur, $ c; box-shadow: $ x, $ y, $ blur, $ c; }
Определение начинается с @mixin за которым следует пользовательское имя. Параметры ( $x , $y , $blur и $c в приведенном выше примере) являются необязательными. Теперь, когда требуется правило box-shadow , только одна строка, вызывающая mixin заменяет необходимость вводить все префиксы поставщика. mixin вызывается с директивой @include :
div { @include box-shadow (0px, 0px, 4px, #fff); }
+
+В Sass mixin представляет собой группу объявлений CSS, которые можно использовать повторно в таблице стилей. Новые функции CSS требуют времени, прежде чем они будут полностью приняты и готовы к использованию во всех браузерах. По мере добавления функций в браузеры, правила CSS, использующие их, могут потребоваться префиксы поставщиков. Рассмотрим «box-shadow»:
Очень много нужно переписать это правило для всех элементов, у которых есть box-shadow , или изменить каждое значение для проверки различных эффектов. Mixins похожи на функции CSS. Вот как написать один:
@mixin box-shadow ($ x, $ y, $ blur, $ c) { -webkit-box-shadow: $ x, $ y, $ blur, $ c; -moz-box-shadow: $ x, $ y, $ blur, $ c; -ms-box-shadow: $ x, $ y, $ blur, $ c; box-shadow: $ x, $ y, $ blur, $ c; }
Определение начинается с @mixin за которым следует пользовательское имя. Параметры ( $x , $y , $blur и $c в приведенном выше примере) являются необязательными. Теперь, когда требуется правило box-shadow , только одна строка, вызывающая mixin заменяет необходимость вводить все префиксы поставщика. mixin вызывается с директивой @include :
div { @include box-shadow (0px, 0px, 4px, #fff); }
+
## Instructions
- Напишите mixin для mixinborder-radius и дайте ему параметр $radius . Он должен использовать все префиксы поставщика из примера. Затем используйте #awesomeborder-radiusmixin чтобы придать #awesome элементам радиус границы 15px.
+
+Напишите mixin для mixinborder-radius и дайте ему параметр $radius . Он должен использовать все префиксы поставщика из примера. Затем используйте #awesomeborder-radiusmixin чтобы придать #awesome элементам радиус границы 15px.
+
## Tests
```yml
tests:
- - text: Ваш код должен объявить mixin именем border-radius который имеет параметр с именем $radius .
- testString: 'assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi), "Your code should declare a mixin named border-radius which has a parameter named $radius.");'
- - text: Ваш код должен включать -webkit-border-radius который использует параметр $radius .
- testString: 'assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi), "Your code should include the -webkit-border-radius vender prefix that uses the $radius parameter.");'
- - text: 'Ваш код должен включать префикс -moz-border-radius vender, который использует параметр $radius .'
- testString: 'assert(code.match(/-moz-border-radius:\s*?\$radius;/gi), "Your code should include the -moz-border-radius vender prefix that uses the $radius parameter.");'
- - text: 'Ваш код должен включать префикс -ms-border-radius vender, который использует параметр $radius .'
- testString: 'assert(code.match(/-ms-border-radius:\s*?\$radius;/gi), "Your code should include the -ms-border-radius vender prefix that uses the $radius parameter.");'
- - text: Ваш код должен содержать общее правило border-radius которое использует параметр $radius .
- testString: 'assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4, "Your code should include the general border-radius rule that uses the $radius parameter.");'
- - text: 'Ваш код должен вызвать @includeborder-radius mixin с помощью @include слова @include , установив его на 15 пикселей.'
- testString: 'assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi), "Your code should call the border-radius mixin using the @include keyword, setting it to 15px.");'
+ - text: Your code should declare a mixin named border-radius which has a parameter named $radius.
+ testString: assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
+ - text: Your code should include the -webkit-border-radius vender prefix that uses the $radius parameter.
+ testString: assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
+ - text: Your code should include the -moz-border-radius vender prefix that uses the $radius parameter.
+ testString: assert(code.match(/-moz-border-radius:\s*?\$radius;/gi));
+ - text: Your code should include the -ms-border-radius vender prefix that uses the $radius parameter.
+ testString: assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
+ - text: Your code should include the general border-radius rule that uses the $radius parameter.
+ testString: assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4);
+ - text: Your code should call the border-radius mixin using the @include keyword, setting it to 15px.
+ testString: assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));
```
@@ -58,14 +62,29 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.russian.md
index 90d8f86916..619ac74d60 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.russian.md
@@ -2,25 +2,29 @@
id: 587d7fa5367417b2b2512bbd
title: Extend One Set of CSS Styles to Another Element
challengeType: 0
-videoUrl: ''
+forumTopicId: 301456
localeTitle: Расширение одного набора стилей CSS для другого элемента
---
## Description
- У Sass есть функция, называемая extend которая упрощает заимствование правил CSS из одного элемента и построение на них в другом. Например, .panel блок правил CSS .panel класс .panel . Он имеет background-color , height и border .
Теперь вам нужна другая панель под названием .big-panel . Он имеет те же базовые свойства, что и .panel , но также требует width и font-size . Можно скопировать и вставить исходные правила CSS из .panel , но код становится повторяющимся, когда вы добавляете больше типов панелей. Директива extend - это простой способ повторного использования правил, написанных для одного элемента, а затем добавить другое для другого:
.big-panel будет иметь те же свойства, что и .panel в дополнение к новым стилям.
+
+У Sass есть функция, называемая extend которая упрощает заимствование правил CSS из одного элемента и построение на них в другом. Например, .panel блок правил CSS .panel класс .panel . Он имеет background-color , height и border .
Теперь вам нужна другая панель под названием .big-panel . Он имеет те же базовые свойства, что и .panel , но также требует width и font-size . Можно скопировать и вставить исходные правила CSS из .panel , но код становится повторяющимся, когда вы добавляете больше типов панелей. Директива extend - это простой способ повторного использования правил, написанных для одного элемента, а затем добавить другое для другого:
.big-panel будет иметь те же свойства, что и .panel в дополнение к новым стилям.
+
## Instructions
- Создайте класс .info-important который расширяет .info а также имеет background-color установленный на пурпурный.
+
+Создайте класс .info-important который расширяет .info а также имеет background-color установленный на пурпурный.
+
## Tests
```yml
tests:
- - text: В вашем info-important классе должен быть установлен background-color для magenta .
- testString: 'assert(code.match(/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi), "Your info-important class should have a background-color set to magenta.");'
- - text: ''
- testString: 'assert(code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi), "Your info-important class should use @extend to inherit the styling from the info class.");'
+ - text: Your info-important class should have a background-color set to magenta.
+ testString: assert(code.match(/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi));
+ - text: Your info-important class should use @extend to inherit the styling from the info class.
+ testString: assert(code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi));
```
@@ -59,14 +63,37 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
Posts
+
+
This is an important post. It should extend the class ".info" and have its own CSS styles.
+
+
+
+
This is a simple post. It has basic styling and can be extended for other uses.
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/nest-css-with-sass.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/nest-css-with-sass.russian.md
index 64f8f4e0f3..38e1749cc3 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/nest-css-with-sass.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/nest-css-with-sass.russian.md
@@ -2,23 +2,27 @@
id: 587d7dbd367417b2b2512bb5
title: Nest CSS with Sass
challengeType: 0
-videoUrl: ''
+forumTopicId: 301457
localeTitle: Nest CSS с Sass
---
## Description
- Sass допускает nesting правил CSS, что является полезным способом организации таблицы стилей. Как правило, каждый элемент нацелен на другую строку для его стилизации, например:
nav { background-color: red; }
nav ul { list-style: none; }
nav ul li { display: inline-block; }
Для большого проекта в файле CSS будет много строк и правил. Вот где nesting может помочь организовать ваш код, поместив правила дочернего стиля в соответствующие родительские элементы:
nav { background-color: red;
ul { list-style: none;
li { display: inline-block; } } }
+
+Sass допускает nesting правил CSS, что является полезным способом организации таблицы стилей. Как правило, каждый элемент нацелен на другую строку для его стилизации, например:
nav { background-color: red; }
nav ul { list-style: none; }
nav ul li { display: inline-block; }
Для большого проекта в файле CSS будет много строк и правил. Вот где nesting может помочь организовать ваш код, поместив правила дочернего стиля в соответствующие родительские элементы:
nav { background-color: red;
ul { list-style: none;
li { display: inline-block; } } }
+
## Instructions
- Используйте .blog-post выше методику nesting для реорганизации правил CSS для обоих элементов элемента .blog-post . Для целей тестирования h1 должен находиться перед элементом p .
+
+Используйте .blog-post выше методику nesting для реорганизации правил CSS для обоих элементов элемента .blog-post . Для целей тестирования h1 должен находиться перед элементом p .
+
## Tests
```yml
tests:
- - text: 'Ваш код должен реорганизовать правила CSS, чтобы h1 и p были вложены в родительский элемент .blog-post .'
- testString: 'assert(code.match(/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi), "Your code should re-organize the CSS rules so the h1 and p are nested in the .blog-post parent element.");'
+ - text: Your code should re-organize the CSS rules so the h1 and p are nested in the .blog-post parent element.
+ testString: assert(code.match(/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi));
```
@@ -52,14 +56,28 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
Blog Title
+
This is a paragraph
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.russian.md
index 783845cfad..bb36043643 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.russian.md
@@ -2,23 +2,27 @@
id: 587d7dbf367417b2b2512bbc
title: Split Your Styles into Smaller Chunks with Partials
challengeType: 0
-videoUrl: ''
+forumTopicId: 301459
localeTitle: Разделите свои стили на мелкие куски с частицами
---
## Description
-Partials в Sass - это отдельные файлы, содержащие сегменты кода CSS. Они импортируются и используются в других файлах Sass. Это отличный способ группировать аналогичный код в модуль, чтобы поддерживать его. Имена partials начинаются с символа подчеркивания ( _ ), который сообщает Sass, что это небольшой сегмент CSS, а не для преобразования его в файл CSS. Кроме того, файлы Sass заканчиваются расширением .scss . Чтобы привести код в partial файле в другой файл Sass, используйте директиву @import . Например, если все ваши mixins сохранены в partial имени «_mixins.scss», и они необходимы в файле «main.scss», так их можно использовать в основном файле:
// В файле main.scss
@import 'mixins'
Обратите внимание, что подчеркивание не требуется в операторе import - Сасс понимает, что он является partial . После partial импортирования в файл доступны все переменные, mixins и другой код.
+
+Partials в Sass - это отдельные файлы, содержащие сегменты кода CSS. Они импортируются и используются в других файлах Sass. Это отличный способ группировать аналогичный код в модуль, чтобы поддерживать его. Имена partials начинаются с символа подчеркивания ( _ ), который сообщает Sass, что это небольшой сегмент CSS, а не для преобразования его в файл CSS. Кроме того, файлы Sass заканчиваются расширением .scss . Чтобы привести код в partial файле в другой файл Sass, используйте директиву @import . Например, если все ваши mixins сохранены в partial имени «_mixins.scss», и они необходимы в файле «main.scss», так их можно использовать в основном файле:
// В файле main.scss
@import 'mixins'
Обратите внимание, что подчеркивание не требуется в операторе import - Сасс понимает, что он является partial . После partial импортирования в файл доступны все переменные, mixins и другой код.
+
## Instructions
- Напишите оператор @import для импорта partial имени _variables.scss в файл main.scss.
+
+Напишите оператор @import для импорта partial имени _variables.scss в файл main.scss.
+
## Tests
```yml
tests:
- - text: Ваш код должен использовать директиву @import и не должен содержать подчеркивание в имени файла.
- testString: 'assert(code.match(/@import\s+?("|")variables\1/gi), "Your code should use the @import directive, and should not include the underscore in the file name.");'
+ - text: Your code should use the @import directive, and should not include the underscore in the file name.
+ testString: assert(code.match(/@import\s+?('|")variables\1/gi));
```
@@ -36,14 +40,14 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+// The main.scss file
+@import 'variables'
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/store-data-with-sass-variables.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/store-data-with-sass-variables.russian.md
index 322990e5c3..ff4d1d9d99 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/store-data-with-sass-variables.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/store-data-with-sass-variables.russian.md
@@ -2,29 +2,33 @@
id: 587d7dbd367417b2b2512bb4
title: Store Data with Sass Variables
challengeType: 0
-videoUrl: ''
+forumTopicId: 301460
localeTitle: Сохранять данные с помощью переменных Sass
---
## Description
- Одна из особенностей Sass, которая отличается от CSS, заключается в использовании переменных. Они объявляются и устанавливаются для хранения данных, похожих на JavaScript. В JavaScript переменные определяются с использованием слов let и const . В Sass переменные начинаются с $ за которым следует имя переменной. Вот несколько примеров:
// Для использования переменных: h1 { font-family: $ main-fonts; цвет: $ headings-color; }
Одним из примеров полезности переменных является то, что ряд элементов должен быть одного цвета. Если этот цвет изменен, единственным местом для редактирования кода является значение переменной.
+
+Одна из особенностей Sass, которая отличается от CSS, заключается в использовании переменных. Они объявляются и устанавливаются для хранения данных, похожих на JavaScript. В JavaScript переменные определяются с использованием слов let и const . В Sass переменные начинаются с $ за которым следует имя переменной. Вот несколько примеров:
// Для использования переменных: h1 { font-family: $ main-fonts; цвет: $ headings-color; }
Одним из примеров полезности переменных является то, что ряд элементов должен быть одного цвета. Если этот цвет изменен, единственным местом для редактирования кода является значение переменной.
+
## Instructions
- Создайте переменную $text-color и установите ее на красный. Затем измените значение свойства color для .blog-post и h2 на переменную $text-color .
+
+Создайте переменную $text-color и установите ее на красный. Затем измените значение свойства color для .blog-post и h2 на переменную $text-color .
+
## Tests
```yml
tests:
- - text: 'Ваш код должен иметь переменную Sass, объявленную для $text-color со значением красного цвета.'
- testString: 'assert(code.match(/\$text-color:\s*?red;/g), "Your code should have a Sass variable declared for $text-color with a value of red.");'
- - text: Ваш код должен использовать переменную $text-color для изменения color для .blog-post и h2 .
- testString: 'assert(code.match(/color:\s*?\$text-color;/g), "Your code should use the $text-color variable to change the color for the .blog-post and h2 items.");'
- - text: .blog-post должен иметь цвет красного цвета.
- testString: 'assert($(".blog-post").css("color") == "rgb(255, 0, 0)", "Your .blog-post element should have a color of red.");'
- - text: Ваши элементы h2 должны иметь красный цвет.
- testString: 'assert($("h2").css("color") == "rgb(255, 0, 0)", "Your h2 elements should have a color of red.");'
+ - text: Your code should have a Sass variable declared for $text-color with a value of red.
+ testString: assert(code.match(/\$text-color:\s*?red;/g));
+ - text: Your code should use the $text-color variable to change the color for the .blog-post and h2 items.
+ testString: assert(code.match(/color:\s*?\$text-color;/g));
+ - text: Your .blog-post element should have a color of red.
+ testString: assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
+ - text: Your h2 elements should have a color of red.
+ testString: assert($('h2').css('color') == 'rgb(255, 0, 0)');
```
@@ -65,14 +69,36 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
Learn Sass
+
+
Some random title
+
This is a paragraph with some random text in it
+
+
+
Header #2
+
Here is some more random text.
+
+
+
Here is another header
+
Even more random text within a paragraph
+
```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.russian.md
index 8ae86d5976..0e03720594 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.russian.md
@@ -2,29 +2,33 @@
id: 587d7dbf367417b2b2512bba
title: Use @each to Map Over Items in a List
challengeType: 0
-videoUrl: ''
+forumTopicId: 301461
localeTitle: Использовать @each для сопоставления элементов в списке
---
## Description
- Последняя задача показала, как директива @for использует начальное и конечное значение для циклического цикла определенное количество раз. Sass также предлагает директиву @each которая @each каждый элемент в списке или карте. На каждой итерации переменная присваивается текущему значению из списка или карты.
@each $ color в синем, красном, зеленом { . # {$ color} -text {color: $ color;} }
@each $ key, $ color в $ colors { . # {$ color} -text {color: $ color;} }
Обратите внимание, что $key переменная $key необходима для ссылки на ключи на карте. В противном случае, скомпилированный CSS будет иметь color1 , color2 ... в нем. Оба приведенных выше примера кода преобразуются в следующий CSS:
.blue-text { цвет синий; }
.red-text { красный цвет; }
.green-text { цвет: зеленый; }
+
+Последняя задача показала, как директива @for использует начальное и конечное значение для циклического цикла определенное количество раз. Sass также предлагает директиву @each которая @each каждый элемент в списке или карте. На каждой итерации переменная присваивается текущему значению из списка или карты.
@each $ color в синем, красном, зеленом { . # {$ color} -text {color: $ color;} }
@each $ key, $ color в $ colors { . # {$ color} -text {color: $ color;} }
Обратите внимание, что $key переменная $key необходима для ссылки на ключи на карте. В противном случае, скомпилированный CSS будет иметь color1 , color2 ... в нем. Оба приведенных выше примера кода преобразуются в следующий CSS:
.blue-text { цвет синий; }
.red-text { красный цвет; }
.green-text { цвет: зеленый; }
+
## Instructions
- Напишите директиву @each которая проходит через список: blue, black, red и назначает каждую переменную классу .color-bg , где часть «цвет» изменяется для каждого элемента. Каждый класс должен установить background-color соответствующего цвета.
+
+Напишите директиву @each которая проходит через список: blue, black, red и назначает каждую переменную классу .color-bg , где часть «цвет» изменяется для каждого элемента. Каждый класс должен установить background-color соответствующего цвета.
+
## Tests
```yml
tests:
- - text: Ваш код должен использовать директиву @each .
- testString: 'assert(code.match(/@each /g), "Your code should use the @each directive.");'
- - text: .blue-bg должен иметь синий background-color .
- testString: 'assert($(".blue-bg").css("background-color") == "rgb(0, 0, 255)", "Your .blue-bg class should have a background-color of blue.");'
- - text: .black-bg должен иметь background-color черного.
- testString: 'assert($(".black-bg").css("background-color") == "rgb(0, 0, 0)", "Your .black-bg class should have a background-color of black.");'
- - text: .red-bg должен иметь background-color красного цвета.
- testString: 'assert($(".red-bg").css("background-color") == "rgb(255, 0, 0)", "Your .red-bg class should have a background-color of red.");'
+ - text: Your code should use the @each directive.
+ testString: assert(code.match(/@each /g));
+ - text: Your .blue-bg class should have a background-color of blue.
+ testString: assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
+ - text: Your .black-bg class should have a background-color of black.
+ testString: assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
+ - text: Your .red-bg class should have a background-color of red.
+ testString: assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
```
@@ -54,14 +58,49 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
+
```
+
+
+
+```html
+
+
+
+
+
+```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.russian.md
index 34394a3e8a..0f4a479076 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.russian.md
@@ -2,33 +2,37 @@
id: 587d7dbe367417b2b2512bb9
title: Use @for to Create a Sass Loop
challengeType: 0
-videoUrl: ''
+forumTopicId: 301462
localeTitle: Используйте @ для создания петли Sass
---
## Description
- Директива @for добавляет стили в цикле, очень похожие for цикл for в JavaScript. @for используется двумя способами: «начать с конца» или «начать с конца». Основное различие заключается в том, что «начало к концу» исключает конечный номер, а «начало через конец» включает конечный номер. Вот начало через конец , например:
@for $ i от 1 до 12 { .col - # {$ i} {width: 100% / 12 * $ i; } }
Часть #{$i} - это синтаксис для объединения переменной ( i ) с текстом для создания строки. Когда файл Sass преобразуется в CSS, он выглядит так:
.col-1 { ширина: 8,33333%; }
.col-2 { ширина: 16,66667%; }
...
.col-12 { ширина: 100%; }
Это мощный способ создания сетки. Теперь у вас есть двенадцать вариантов ширины столбцов, доступных как классы CSS.
+
+Директива @for добавляет стили в цикле, очень похожие for цикл for в JavaScript. @for используется двумя способами: «начать с конца» или «начать с конца». Основное различие заключается в том, что «начало к концу» исключает конечный номер, а «начало через конец» включает конечный номер. Вот начало через конец , например:
@for $ i от 1 до 12 { .col - # {$ i} {width: 100% / 12 * $ i; } }
Часть #{$i} - это синтаксис для объединения переменной ( i ) с текстом для создания строки. Когда файл Sass преобразуется в CSS, он выглядит так:
.col-1 { ширина: 8,33333%; }
.col-2 { ширина: 16,66667%; }
...
.col-12 { ширина: 100%; }
Это мощный способ создания сетки. Теперь у вас есть двенадцать вариантов ширины столбцов, доступных как классы CSS.
+
## Instructions
- Напишите директиву @for которая принимает переменную $j которая идет от 1 до 6. Она должна создать 5 классов с именем .text-1 to .text-5 где каждый имеет font-size установленный в 10px, умноженный на индекс.
+
+Напишите директиву @for которая принимает переменную $j которая идет от 1 до 6. Она должна создать 5 классов с именем .text-1 to .text-5 где каждый имеет font-size установленный в 10px, умноженный на индекс.
+
## Tests
```yml
tests:
- - text: Ваш код должен использовать директиву @for .
- testString: 'assert(code.match(/@for /g), "Your code should use the @for directive.");'
- - text: Класс .text-1 должен иметь font-size 10px.
- testString: 'assert($(".text-1").css("font-size") == "10px", "Your .text-1 class should have a font-size of 10px.");'
- - text: Класс .text-2 должен иметь font-size 20 пикселей.
- testString: 'assert($(".text-2").css("font-size") == "20px", "Your .text-2 class should have a font-size of 20px.");'
- - text: Класс .text-3 должен иметь font-size 30 пикселей.
- testString: 'assert($(".text-3").css("font-size") == "30px", "Your .text-3 class should have a font-size of 30px.");'
- - text: ''
- testString: 'assert($(".text-4").css("font-size") == "40px", "Your .text-4 class should have a font-size of 40px.");'
- - text: Класс .text-5 должен иметь font-size 50 пикселей.
- testString: 'assert($(".text-5").css("font-size") == "50px", "Your .text-5 class should have a font-size of 50px.");'
+ - text: Your code should use the @for directive.
+ testString: assert(code.match(/@for /g));
+ - text: Your .text-1 class should have a font-size of 10px.
+ testString: assert($('.text-1').css('font-size') == '10px');
+ - text: Your .text-2 class should have a font-size of 20px.
+ testString: assert($('.text-2').css('font-size') == '20px');
+ - text: Your .text-3 class should have a font-size of 30px.
+ testString: assert($('.text-3').css('font-size') == '30px');
+ - text: Your .text-4 class should have a font-size of 40px.
+ testString: assert($('.text-4').css('font-size') == '40px');
+ - text: Your .text-5 class should have a font-size of 50px.
+ testString: assert($('.text-5').css('font-size') == '50px');
```
@@ -56,14 +60,43 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
Hello
+
Hello
+
Hello
+
Hello
+
Hello
```
+
+
+
+```html
+
+
+
Hello
+
Hello
+
Hello
+
Hello
+
Hello
+```
+
diff --git a/curriculum/challenges/russian/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.russian.md b/curriculum/challenges/russian/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.russian.md
index a6ece32760..167233d24d 100644
--- a/curriculum/challenges/russian/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.russian.md
+++ b/curriculum/challenges/russian/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.russian.md
@@ -2,15 +2,18 @@
id: 587d7dbe367417b2b2512bb8
title: Use @if and @else to Add Logic To Your Styles
challengeType: 0
-videoUrl: ''
-localeTitle: 'Используйте @if и @else, чтобы добавить логику в свои стили.'
+forumTopicId: 301463
+localeTitle: Используйте @if и @else, чтобы добавить логику в свои стили.
---
## Description
- Директива @if в Sass полезна для проверки конкретного случая - она работает так же, как и оператор if в JavaScript.
И так же, как в JavaScript, @else if и @else test для получения дополнительных условий:
@mixin text-effect ($ val) { @if $ val == опасность { красный цвет; } @else, если $ val == alert { цвет: желтый; } @else, если $ val == success { цвет: зеленый; } @else { черный цвет; } }
+
## Instructions
- Создайте mixin называемый border-stroke который принимает параметр $val . mixin должен проверить следующие условия, используя @if , @else if и @else :
+
+Создайте mixin называемый border-stroke который принимает параметр $val . mixin должен проверить следующие условия, используя @if , @else if и @else :
свет - 1px сплошной черный средний - 3px сплошной черный тяжелый - 6px сплошной черный
Если $val не является light, medium, или heavy, для границы должно быть установлено значение none.
@@ -20,16 +23,16 @@ localeTitle: 'Используйте @if и @else, чтобы добавить
```yml
tests:
- - text: Ваш код должен объявить mixin именем border-stroke который имеет параметр с именем $val .
- testString: 'assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi), "Your code should declare a mixin named border-stroke which has a parameter named $val.");'
- - text: 'Ваш mixin должен иметь инструкцию @if чтобы проверить, светло ли $val , и установить border в 1px сплошным черным.'
- testString: 'assert(code.match(/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi), "Your mixin should have an @if statement to check if $val is light, and to set the border to 1px solid black.");'
- - text: 'Ваш mixin должен иметь @else if чтобы проверить, является ли $val средним, и установить border на 3px сплошной черный.'
- testString: 'assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi), "Your mixin should have an @else if statement to check if $val is medium, and to set the border to 3px solid black.");'
- - text: ''
- testString: 'assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi), "Your mixin should have an @else if statement to check if $val is heavy, and to set the border to 6px solid black.");'
- - text: Ваш mixin должен иметь инструкцию @else чтобы установить border в none.
- testString: 'assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi), "Your mixin should have an @else statement to set the border to none.");'
+ - text: Your code should declare a mixin named border-stroke which has a parameter named $val.
+ testString: assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
+ - text: Your mixin should have an @if statement to check if $val is light, and to set the border to 1px solid black.
+ testString: assert(code.match(/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi));
+ - text: Your mixin should have an @else if statement to check if $val is medium, and to set the border to 3px solid black.
+ testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi));
+ - text: Your mixin should have an @else if statement to check if $val is heavy, and to set the border to 6px solid black.
+ testString: assert(code.match(/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi));
+ - text: Your mixin should have an @else statement to set the border to none.
+ testString: assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
```
@@ -59,14 +62,38 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.russian.md
index 1b2fdd34c3..7dd0a14cca 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.russian.md
@@ -3,15 +3,18 @@ id: bd7168d8c242eddfaeb5bd13
title: Visualize Data with a Bar Chart
isRequired: true
challengeType: 3
-videoUrl: ''
+forumTopicId: 301464
localeTitle: Визуализация данных с помощью диаграммы
---
## Description
-Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/GrZVaM . Выполните приведенные ниже истории пользователей и пройдите все тесты для выполнения задания. Создайте для приложения свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк для создания интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге это исправим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Ваша диаграмма должна иметь заголовок с соответствующим id="title" . История пользователя # 2: Ваша диаграмма должна иметь g элемент оси х с соответствующим id="x-axis" . User Story # 3: Ваша диаграмма должна иметь ось y элемента g с соответствующим id="y-axis" . User Story # 4: Обе оси должны содержать несколько меток ярлыков, каждый из которых имеет соответствующий class="tick" . User Story # 5: Ваша диаграмма должна иметь rect элемент для каждой точки данных с соответствующим class="bar" отображающим данные. User Story # 6: В каждом баре должны быть data-date и data-gdp содержащие значения даты и ВВП. User Story # 7: свойства data-date бара должны соответствовать порядку предоставленных данных. User Story # 8: Свойства data-gdp элементов бара должны соответствовать порядку предоставленных данных. User Story # 9: Высота каждого элемента бара должна точно представлять соответствующий ВВП. User Story # 10: Атрибут data-date и его соответствующий элемент бара должны совпадать с соответствующим значением по оси x. User Story # 11: атрибут data-gdp и его соответствующий элемент бара должны совпадать с соответствующим значением по оси y. User Story # 12: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации об этой области. User Story # 13: Моя подсказка должна иметь свойство data-date , соответствующее data-date данных активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json Вы можете создать свой проект, на CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js . После того, как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми результатами тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
+Цель: создать приложение CodePen.io , функционально подобное этому: https://codepen.io/freeCodeCamp/full/GrZVaM . Выполните приведенные ниже истории пользователей и пройдите все тесты для выполнения задания. Создайте для приложения свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк для создания интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге это исправим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Ваша диаграмма должна иметь заголовок с соответствующим id="title" . История пользователя # 2: Ваша диаграмма должна иметь g элемент оси х с соответствующим id="x-axis" . User Story # 3: Ваша диаграмма должна иметь ось y элемента g с соответствующим id="y-axis" . User Story # 4: Обе оси должны содержать несколько меток ярлыков, каждый из которых имеет соответствующий class="tick" . User Story # 5: Ваша диаграмма должна иметь rect элемент для каждой точки данных с соответствующим class="bar" отображающим данные. User Story # 6: В каждом баре должны быть data-date и data-gdp содержащие значения даты и ВВП. User Story # 7: свойства data-date бара должны соответствовать порядку предоставленных данных. User Story # 8: Свойства data-gdp элементов бара должны соответствовать порядку предоставленных данных. User Story # 9: Высота каждого элемента бара должна точно представлять соответствующий ВВП. User Story # 10: Атрибут data-date и его соответствующий элемент бара должны совпадать с соответствующим значением по оси x. User Story # 11: атрибут data-gdp и его соответствующий элемент бара должны совпадать с соответствующим значением по оси y. User Story # 12: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации об этой области. User Story # 13: Моя подсказка должна иметь свойство data-date , соответствующее data-date данных активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json Вы можете создать свой проект, на CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, которая вам нравится: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js . После того, как вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми результатами тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
## Instructions
-
+
+
## Tests
@@ -19,20 +22,6 @@ localeTitle: Визуализация данных с помощью диагр
```yml
tests: []
-
```
-
-## Challenge Seed
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.russian.md
index b4dfb52811..36c5a0610d 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.russian.md
@@ -3,15 +3,18 @@ id: 587d7fa6367417b2b2512bbf
title: Visualize Data with a Choropleth Map
isRequired: true
challengeType: 3
-videoUrl: ''
+forumTopicId: 301465
localeTitle: Визуализация данных с помощью карты Choropleth
---
## Description
-Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/EZKqza . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Мой choropleth должен иметь заголовок с соответствующим id="title" . User Story # 2: У моего choropleth должен быть элемент описания с соответствующим id="description" . User Story # 3: Мой choropleth должен иметь графства с соответствующим class="county" которые представляют данные. User Story # 4: должно быть не менее 4 разных цветов заливки, используемых для округов. User Story # 5: Мои округа должны иметь характеристики data-fips и data-education имеющие соответствующие значения fips и education. User Story # 6: Мой choropleth должен иметь графство для каждой предоставленной точки данных. User Story # 7: В округах должны быть значения данных и данных, которые соответствуют данным образца. User Story # 8: Мой choropleth должен иметь легенду с соответствующим id="legend" . User Story # 9: Для легенды должно быть не менее 4 различных цветов заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-education которое соответствует data-education данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта:
Данные об образовании в США:https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
Данные графства США:https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/EZKqza . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Мой choropleth должен иметь заголовок с соответствующим id="title" . User Story # 2: У моего choropleth должен быть элемент описания с соответствующим id="description" . User Story # 3: Мой choropleth должен иметь графства с соответствующим class="county" которые представляют данные. User Story # 4: должно быть не менее 4 разных цветов заливки, используемых для округов. User Story # 5: Мои округа должны иметь характеристики data-fips и data-education имеющие соответствующие значения fips и education. User Story # 6: Мой choropleth должен иметь графство для каждой предоставленной точки данных. User Story # 7: В округах должны быть значения данных и данных, которые соответствуют данным образца. User Story # 8: Мой choropleth должен иметь легенду с соответствующим id="legend" . User Story # 9: Для легенды должно быть не менее 4 различных цветов заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-education которое соответствует data-education данных в активной области. Вот данные, которые вам нужно будет выполнить для этого проекта:
Данные об образовании в США:https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json
Данные графства США:https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json
Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
## Instructions
-
+
+
## Tests
@@ -19,20 +22,6 @@ localeTitle: Визуализация данных с помощью карты
```yml
tests: []
-
```
-
-## Challenge Seed
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.russian.md
index 81d3e465f1..f81f2eb8e2 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.russian.md
@@ -3,15 +3,18 @@ id: bd7188d8c242eddfaeb5bd13
title: Visualize Data with a Heat Map
isRequired: true
challengeType: 3
-videoUrl: ''
+forumTopicId: 301466
localeTitle: Визуализация данных с помощью карты тепла
---
## Description
-Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/JEXgeY . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта тепла должна иметь заголовок с соответствующим id="title" . User Story # 2: Моя карта тепла должна иметь описание с соответствующим id="description" . User Story # 3: Моя карта тепла должна иметь ось x с соответствующим id="x-axis" . User Story # 4: Моя карта тепла должна иметь ось y с соответствующим id="y-axis" . User Story # 5: Моя карта тепла должна иметь rect элементы с class="cell" которые представляют данные. User Story # 6: Для ячеек должно быть не менее 4 различных цветов заливки. User Story # 7: Каждая ячейка будет иметь свойства data-month , data-year , data-temp содержащие их соответствующие значения месяца, года и температуры. User Story # 8:data-month , data-year каждой ячейки должен находиться в пределах диапазона данных. User Story # 9: Моя карта тепла должна иметь ячейки, которые выравниваются с соответствующим месяцем по оси y. User Story # 10: Моя карта тепла должна иметь ячейки, которые совпадают с соответствующим годом по оси x. User Story # 11: Моя карта тепла должна иметь несколько меток ярлыков по оси Y с полным именем месяца. User Story # 12: Моя карта тепла должна иметь несколько меток ярлыков по оси x с годами между 1754 и 2015 годами. Пользовательская история №13: Моя карта тепла должна иметь легенду с соответствующим id="legend" . User Story # 14: Моя легенда должна содержать rect элементы. User Story # 15:rect элементы в легенде должны использовать как минимум 4 разных цвета заливки. User Story # 16: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации об этой области. User Story # 16: Моя подсказка должна обладать свойством data-year которое соответствует году data-year активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/JEXgeY . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта тепла должна иметь заголовок с соответствующим id="title" . User Story # 2: Моя карта тепла должна иметь описание с соответствующим id="description" . User Story # 3: Моя карта тепла должна иметь ось x с соответствующим id="x-axis" . User Story # 4: Моя карта тепла должна иметь ось y с соответствующим id="y-axis" . User Story # 5: Моя карта тепла должна иметь rect элементы с class="cell" которые представляют данные. User Story # 6: Для ячеек должно быть не менее 4 различных цветов заливки. User Story # 7: Каждая ячейка будет иметь свойства data-month , data-year , data-temp содержащие их соответствующие значения месяца, года и температуры. User Story # 8:data-month , data-year каждой ячейки должен находиться в пределах диапазона данных. User Story # 9: Моя карта тепла должна иметь ячейки, которые выравниваются с соответствующим месяцем по оси y. User Story # 10: Моя карта тепла должна иметь ячейки, которые совпадают с соответствующим годом по оси x. User Story # 11: Моя карта тепла должна иметь несколько меток ярлыков по оси Y с полным именем месяца. User Story # 12: Моя карта тепла должна иметь несколько меток ярлыков по оси x с годами между 1754 и 2015 годами. Пользовательская история №13: Моя карта тепла должна иметь легенду с соответствующим id="legend" . User Story # 14: Моя легенда должна содержать rect элементы. User Story # 15:rect элементы в легенде должны использовать как минимум 4 разных цвета заливки. User Story # 16: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации об этой области. User Story # 16: Моя подсказка должна обладать свойством data-year которое соответствует году data-year активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
## Instructions
-
+
+
## Tests
@@ -19,20 +22,6 @@ localeTitle: Визуализация данных с помощью карты
```yml
tests: []
-
```
-
-## Challenge Seed
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.russian.md
index 977083aa22..68b516f479 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.russian.md
@@ -3,15 +3,18 @@ id: bd7178d8c242eddfaeb5bd13
title: Visualize Data with a Scatterplot Graph
isRequired: true
challengeType: 3
-videoUrl: ''
+forumTopicId: 301467
localeTitle: Визуализировать данные с помощью диаграммы Scatterplot
---
## Description
-Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/bgpXyK . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Я вижу элемент заголовка, который имеет соответствующий id="title" . User Story # 2: Я вижу ось x, которая имеет соответствующий id="x-axis" . User Story # 3: Я вижу ось y, которая имеет соответствующий id="y-axis" . User Story # 4: Я вижу точки, каждая из которых имеет класс dot , которые представляют собой данные, которые отображаются. User Story # 5: Каждая точка должна иметь свойства data-xvalue и data-yvalue содержащие их соответствующие значения x и y. User Story # 6: Значение data-xvaluedata-yvalue и значение data-xvaluedata-yvalue каждой точки должны находиться в пределах диапазона фактических данных и в правильном формате данных. Для data-xvalue целые числа (полные годы) или объекты Date приемлемы для оценки теста. Для data-yvalue (минут) используйте объекты Date. User Story # 7: Значение data-xvalue и соответствующая точка должны совпадать с соответствующей точкой / значением по оси x. User Story # 8: Значение data-yvalue и соответствующая точка должны совпадать с соответствующей точкой / значением по оси y. User Story # 9: Я вижу несколько меток ярлыков по оси Y с временным форматом %M:%SUser Story # 10: Я вижу несколько меток ярлыков по оси x, которые показывают год. User Story # 11: Я вижу, что диапазон меток оси X находится в пределах диапазона фактических данных по оси x. User Story # 12: Я вижу, что диапазон меток оси Y находится в пределах диапазона фактических данных оси Y. User Story # 13: Я вижу легенду, содержащую описательный текст с id="legend" . User Story # 14: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 15: Моя подсказка должна иметь свойство data-year которое соответствует data-xvalue активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/bgpXyK . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Я вижу элемент заголовка, который имеет соответствующий id="title" . User Story # 2: Я вижу ось x, которая имеет соответствующий id="x-axis" . User Story # 3: Я вижу ось y, которая имеет соответствующий id="y-axis" . User Story # 4: Я вижу точки, каждая из которых имеет класс dot , которые представляют собой данные, которые отображаются. User Story # 5: Каждая точка должна иметь свойства data-xvalue и data-yvalue содержащие их соответствующие значения x и y. User Story # 6: Значение data-xvaluedata-yvalue и значение data-xvaluedata-yvalue каждой точки должны находиться в пределах диапазона фактических данных и в правильном формате данных. Для data-xvalue целые числа (полные годы) или объекты Date приемлемы для оценки теста. Для data-yvalue (минут) используйте объекты Date. User Story # 7: Значение data-xvalue и соответствующая точка должны совпадать с соответствующей точкой / значением по оси x. User Story # 8: Значение data-yvalue и соответствующая точка должны совпадать с соответствующей точкой / значением по оси y. User Story # 9: Я вижу несколько меток ярлыков по оси Y с временным форматом %M:%SUser Story # 10: Я вижу несколько меток ярлыков по оси x, которые показывают год. User Story # 11: Я вижу, что диапазон меток оси X находится в пределах диапазона фактических данных по оси x. User Story # 12: Я вижу, что диапазон меток оси Y находится в пределах диапазона фактических данных оси Y. User Story # 13: Я вижу легенду, содержащую описательный текст с id="legend" . User Story # 14: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 15: Моя подсказка должна иметь свойство data-year которое соответствует data-xvalue активной области. Вот набор данных, который вам нужно будет выполнить для этого проекта: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json Вы можете создать свой проект, нарисуя это перо CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
## Instructions
-
+
+
## Tests
@@ -19,20 +22,6 @@ localeTitle: Визуализировать данные с помощью ди
```yml
tests: []
-
```
-
-## Challenge Seed
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.russian.md
index 848b7130e9..d229824c70 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.russian.md
@@ -3,35 +3,25 @@ id: 587d7fa6367417b2b2512bc0
title: Visualize Data with a Treemap Diagram
isRequired: true
challengeType: 3
-videoUrl: ''
+forumTopicId: 301468
localeTitle: Визуализация данных с диаграммой карт
---
## Description
-Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/KaNGNR . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта дерева должна иметь заголовок с соответствующим id="title" . User Story # 2: Моя древовидная карта должна иметь описание с соответствующим id="description" . User Story # 3: Моя карта деревьев должна иметь rect элементы с соответствующим class="tile" которые представляют данные. User Story # 4: Для плиток должно быть не менее двух разных цветов заливки. User Story # 5: Каждая плитка должна иметь свойства data-name , data-category и data-value содержащие их соответствующее имя, категорию и значение. User Story # 6: Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. User Story # 7: Моя карта деревьев должна иметь легенду с соответствующим id="legend" . User Story # 8: Моя легенда должна иметь rect элементы с соответствующим class="legend-item" . User Story # 9:rect элементы в легенде должны использовать как минимум 2 разных цвета заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-value , соответствующее data-value данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных:
Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
+Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/KaNGNR . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript, CSS и D3 svg-based visualization library. Тесты требуют создания осей с использованием свойства оси D3, которое автоматически генерирует тики вдоль оси. Эти тики необходимы для прохождения тестов D3, потому что их позиции используются для определения выравнивания графических элементов. Вы найдете информацию о генерации осей на странице https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . Обязательные (не виртуальные) элементы DOM запрашиваются в момент каждого теста. Если вы используете фреймворк интерфейса (например, Vue), результаты теста могут быть неточными для динамического содержимого. Мы надеемся, что в конечном итоге их разместим, но эти рамки в настоящее время не поддерживаются для проектов D3. User Story # 1: Моя карта дерева должна иметь заголовок с соответствующим id="title" . User Story # 2: Моя древовидная карта должна иметь описание с соответствующим id="description" . User Story # 3: Моя карта деревьев должна иметь rect элементы с соответствующим class="tile" которые представляют данные. User Story # 4: Для плиток должно быть не менее двух разных цветов заливки. User Story # 5: Каждая плитка должна иметь свойства data-name , data-category и data-value содержащие их соответствующее имя, категорию и значение. User Story # 6: Площадь каждой плитки должна соответствовать размеру данных: плитки с большим значением данных должны иметь большую площадь. User Story # 7: Моя карта деревьев должна иметь легенду с соответствующим id="legend" . User Story # 8: Моя легенда должна иметь rect элементы с соответствующим class="legend-item" . User Story # 9:rect элементы в легенде должны использовать как минимум 2 разных цвета заливки. User Story # 10: Я могу навести курсор мыши на область и увидеть всплывающую подсказку с соответствующей id="tooltip" которая отображает больше информации о области. User Story # 11: Моя подсказка должна иметь свойство data-value , соответствующее data-value данных активной области. Для этого проекта вы можете использовать любой из следующих наборов данных:
Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.
+
## Instructions
-undefined
+
+
+
## Tests
```yml
tests: []
-
```
-
-## Challenge Seed
-
-
-
-
-## Solution
-
-
-```js
-// solution required
-```
-
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.russian.md
index bbbe5eefb8..045203bb4c 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.russian.md
@@ -2,23 +2,27 @@
id: 587d7faa367417b2b2512bd4
title: Add a Hover Effect to a D3 Element
challengeType: 6
-videoUrl: ''
+forumTopicId: 301469
localeTitle: Добавить эффект наведения на элемент D3
---
## Description
- Можно добавлять эффекты, выделяющие панель, когда пользователь наводил на нее курсор мыши. Пока что стиль для прямоугольников применяется со встроенными методами D3 и SVG, но вы также можете использовать CSS. Вы устанавливаете класс CSS в элементах SVG с помощью метода attr() . Затем псевдокласс класса :hover для вашего нового класса содержит правила стиля для любых эффектов зависания.
+
+Можно добавлять эффекты, выделяющие панель, когда пользователь наводил на нее курсор мыши. Пока что стиль для прямоугольников применяется со встроенными методами D3 и SVG, но вы также можете использовать CSS. Вы устанавливаете класс CSS в элементах SVG с помощью метода attr() . Затем псевдокласс класса :hover для вашего нового класса содержит правила стиля для любых эффектов зависания.
+
## Instructions
- Используйте метод attr() чтобы добавить класс bar ко всем элементам rect . Это изменит цвет fill на коричневый, если вы нажмете на него.
+
+Используйте метод attr() чтобы добавить класс bar ко всем элементам rect . Это изменит цвет fill на коричневый, если вы нажмете на него.
+
## Tests
```yml
tests:
- - text: Ваши rect элементы должны иметь класс bar .
- testString: 'assert($("rect").attr("class") == "bar", "Your rect elements should have a class of bar.");'
+ - text: Your rect elements should have a class of bar.
+ testString: assert($('rect').attr('class') == "bar");
```
@@ -77,14 +81,51 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.russian.md
index e00b3d9acf..8861143474 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.russian.md
@@ -2,41 +2,45 @@
id: 587d7faa367417b2b2512bd6
title: Add a Tooltip to a D3 Element
challengeType: 6
-videoUrl: ''
+forumTopicId: 301470
localeTitle: Добавление всплывающей подсказки к элементу D3
---
## Description
- Всплывающая подсказка показывает дополнительную информацию об элементе на странице, когда пользователь наводит курсор на этот элемент. Существует несколько способов добавления всплывающей подсказки к визуализации, эта задача использует элемент title SVG. title с методом text() для динамического добавления данных в столбцы.
+
+Всплывающая подсказка показывает дополнительную информацию об элементе на странице, когда пользователь наводит курсор на этот элемент. Существует несколько способов добавления всплывающей подсказки к визуализации, эта задача использует элемент title SVG. title с методом text() для динамического добавления данных в столбцы.
+
## Instructions
- Добавляйте элемент title под каждым rect узлом. Затем вызовите метод text() с функцией обратного вызова, чтобы текст отображал значение данных.
+
+Добавляйте элемент title под каждым rect узлом. Затем вызовите метод text() с функцией обратного вызова, чтобы текст отображал значение данных.
+
## Tests
```yml
tests:
- - text: Ваш код должен содержать 9 элементов title .
- testString: 'assert($("title").length == 9, "Your code should have 9 title elements.");'
- - text: Первый элемент title должен иметь текст всплывающей подсказки 12.
- testString: 'assert($("title").eq(0).text() == "12", "The first title element should have tooltip text of 12.");'
- - text: ''
- testString: 'assert($("title").eq(1).text() == "31", "The second title element should have tooltip text of 31.");'
- - text: ''
- testString: 'assert($("title").eq(2).text() == "22", "The third title element should have tooltip text of 22.");'
- - text: ''
- testString: 'assert($("title").eq(3).text() == "17", "The fourth title element should have tooltip text of 17.");'
- - text: ''
- testString: 'assert($("title").eq(4).text() == "25", "The fifth title element should have tooltip text of 25.");'
- - text: ''
- testString: 'assert($("title").eq(5).text() == "18", "The sixth title element should have tooltip text of 18.");'
- - text: ''
- testString: 'assert($("title").eq(6).text() == "29", "The seventh title element should have tooltip text of 29.");'
- - text: ''
- testString: 'assert($("title").eq(7).text() == "14", "The eighth title element should have tooltip text of 14.");'
- - text: ''
- testString: 'assert($("title").eq(8).text() == "9", "The ninth title element should have tooltip text of 9.");'
+ - text: Your code should have 9 title elements.
+ testString: assert($('title').length == 9);
+ - text: The first title element should have tooltip text of 12.
+ testString: assert($('title').eq(0).text() == '12');
+ - text: The second title element should have tooltip text of 31.
+ testString: assert($('title').eq(1).text() == '31');
+ - text: The third title element should have tooltip text of 22.
+ testString: assert($('title').eq(2).text() == '22');
+ - text: The fourth title element should have tooltip text of 17.
+ testString: assert($('title').eq(3).text() == '17');
+ - text: The fifth title element should have tooltip text of 25.
+ testString: assert($('title').eq(4).text() == '25');
+ - text: The sixth title element should have tooltip text of 18.
+ testString: assert($('title').eq(5).text() == '18');
+ - text: The seventh title element should have tooltip text of 29.
+ testString: assert($('title').eq(6).text() == '29');
+ - text: The eighth title element should have tooltip text of 14.
+ testString: assert($('title').eq(7).text() == '14');
+ - text: The ninth title element should have tooltip text of 9.
+ testString: assert($('title').eq(8).text() == '9');
```
@@ -96,14 +100,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.russian.md
index 191e11c77c..c66a307580 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.russian.md
@@ -2,43 +2,47 @@
id: 587d7fab367417b2b2512bd8
title: Add Attributes to the Circle Elements
challengeType: 6
-videoUrl: ''
+forumTopicId: 301471
localeTitle: Добавить атрибуты элементов круга
---
## Description
- Последняя задача создала элементы circle для каждой точки dataset и добавила их в холст SVG. Но D3 нуждается в дополнительной информации о положении и размере каждого circle чтобы отображать их правильно. circle в SVG имеет три основных атрибута. Атрибуты cx и cy - это координаты. Они сообщают D3, где можно расположить центр фигуры на холсте SVG. Радиус (атрибут r ) задает размер circle . Как и rect координата y , атрибут cy для circle измеряется от вершины холста SVG, а не снизу. Все три атрибута могут использовать функцию обратного вызова для динамического определения их значений. Помните, что все методы, закодированные после того, как data(dataset) запускаются один раз для каждого элемента в dataset . Параметр d в функции обратного вызова относится к текущему элементу в dataset , который является массивом для каждой точки. Для доступа к значениям в этом массиве вы используете запись в виде скобок, например d[0] .
+
+Последняя задача создала элементы circle для каждой точки dataset и добавила их в холст SVG. Но D3 нуждается в дополнительной информации о положении и размере каждого circle чтобы отображать их правильно. circle в SVG имеет три основных атрибута. Атрибуты cx и cy - это координаты. Они сообщают D3, где можно расположить центр фигуры на холсте SVG. Радиус (атрибут r ) задает размер circle . Как и rect координата y , атрибут cy для circle измеряется от вершины холста SVG, а не снизу. Все три атрибута могут использовать функцию обратного вызова для динамического определения их значений. Помните, что все методы, закодированные после того, как data(dataset) запускаются один раз для каждого элемента в dataset . Параметр d в функции обратного вызова относится к текущему элементу в dataset , который является массивом для каждой точки. Для доступа к значениям в этом массиве вы используете запись в виде скобок, например d[0] .
+
## Instructions
- Добавьте атрибуты cx , cy и r в элементы circle . Значение cx должно быть первым числом в массиве для каждого элемента в dataset . Значение cy должно основываться на втором номере в массиве, но обязательно показывать диаграмму с правой стороны и не инвертировать. Значение r должно быть 5 для всех кругов.
+
+Добавьте атрибуты cx , cy и r в элементы circle . Значение cx должно быть первым числом в массиве для каждого элемента в dataset . Значение cy должно основываться на втором номере в массиве, но обязательно показывать диаграмму с правой стороны и не инвертировать. Значение r должно быть 5 для всех кругов.
+
## Tests
```yml
tests:
- - text: Ваш код должен содержать 10 элементов circle .
- testString: 'assert($("circle").length == 10, "Your code should have 10 circle elements.");'
- - text: 'Первый элемент circle должен иметь значение cx 34, значение cy 422 и значение r 5.'
- testString: 'assert($("circle").eq(0).attr("cx") == "34" && $("circle").eq(0).attr("cy") == "422" && $("circle").eq(0).attr("r") == "5", "The first circle element should have a cx value of 34, a cy value of 422, and an r value of 5.");'
- - text: 'Второй элемент circle должен иметь значение cx 109, значение cy 220 и значение r 5.'
- testString: 'assert($("circle").eq(1).attr("cx") == "109" && $("circle").eq(1).attr("cy") == "220" && $("circle").eq(1).attr("r") == "5", "The second circle element should have a cx value of 109, a cy value of 220, and an r value of 5.");'
- - text: 'Третий элемент circle должен иметь значение cx 310, значение cy 380 и значение r 5.'
- testString: 'assert($("circle").eq(2).attr("cx") == "310" && $("circle").eq(2).attr("cy") == "380" && $("circle").eq(2).attr("r") == "5", "The third circle element should have a cx value of 310, a cy value of 380, and an r value of 5.");'
- - text: 'Элемент четвертого circle должен иметь значение cx 79, значение cy 89 и значение r 5.'
- testString: 'assert($("circle").eq(3).attr("cx") == "79" && $("circle").eq(3).attr("cy") == "89" && $("circle").eq(3).attr("r") == "5", "The fourth circle element should have a cx value of 79, a cy value of 89, and an r value of 5.");'
- - text: 'Элемент пятого circle должен иметь значение cx 420, значение cy 280 и значение r 5.'
- testString: 'assert($("circle").eq(4).attr("cx") == "420" && $("circle").eq(4).attr("cy") == "280" && $("circle").eq(4).attr("r") == "5", "The fifth circle element should have a cx value of 420, a cy value of 280, and an r value of 5.");'
- - text: 'Элемент шестого circle должен иметь значение cx 233, значение cy 355 и значение r 5.'
- testString: 'assert($("circle").eq(5).attr("cx") == "233" && $("circle").eq(5).attr("cy") == "355" && $("circle").eq(5).attr("r") == "5", "The sixth circle element should have a cx value of 233, a cy value of 355, and an r value of 5.");'
- - text: 'Элемент седьмого circle должен иметь значение cx 333, значение cy 404 и значение r 5.'
- testString: 'assert($("circle").eq(6).attr("cx") == "333" && $("circle").eq(6).attr("cy") == "404" && $("circle").eq(6).attr("r") == "5", "The seventh circle element should have a cx value of 333, a cy value of 404, and an r value of 5.");'
- - text: 'Элемент восьмого circle должен иметь значение cx 222, значение cy 167 и значение r 5.'
- testString: 'assert($("circle").eq(7).attr("cx") == "222" && $("circle").eq(7).attr("cy") == "167" && $("circle").eq(7).attr("r") == "5", "The eighth circle element should have a cx value of 222, a cy value of 167, and an r value of 5.");'
- - text: 'Элемент девятого circle должен иметь значение cx 78, значение cy 180 и значение r 5.'
- testString: 'assert($("circle").eq(8).attr("cx") == "78" && $("circle").eq(8).attr("cy") == "180" && $("circle").eq(8).attr("r") == "5", "The ninth circle element should have a cx value of 78, a cy value of 180, and an r value of 5.");'
- - text: 'Элемент десятого circle должен иметь значение cx 21, значение cy 377 и значение r 5.'
- testString: 'assert($("circle").eq(9).attr("cx") == "21" && $("circle").eq(9).attr("cy") == "377" && $("circle").eq(9).attr("r") == "5", "The tenth circle element should have a cx value of 21, a cy value of 377, and an r value of 5.");'
+ - text: Your code should have 10 circle elements.
+ testString: assert($('circle').length == 10);
+ - text: The first circle element should have a cx value of 34, a cy value of 422, and an r value of 5.
+ testString: assert($('circle').eq(0).attr('cx') == '34' && $('circle').eq(0).attr('cy') == '422' && $('circle').eq(0).attr('r') == '5');
+ - text: The second circle element should have a cx value of 109, a cy value of 220, and an r value of 5.
+ testString: assert($('circle').eq(1).attr('cx') == '109' && $('circle').eq(1).attr('cy') == '220' && $('circle').eq(1).attr('r') == '5');
+ - text: The third circle element should have a cx value of 310, a cy value of 380, and an r value of 5.
+ testString: assert($('circle').eq(2).attr('cx') == '310' && $('circle').eq(2).attr('cy') == '380' && $('circle').eq(2).attr('r') == '5');
+ - text: The fourth circle element should have a cx value of 79, a cy value of 89, and an r value of 5.
+ testString: assert($('circle').eq(3).attr('cx') == '79' && $('circle').eq(3).attr('cy') == '89' && $('circle').eq(3).attr('r') == '5');
+ - text: The fifth circle element should have a cx value of 420, a cy value of 280, and an r value of 5.
+ testString: assert($('circle').eq(4).attr('cx') == '420' && $('circle').eq(4).attr('cy') == '280' && $('circle').eq(4).attr('r') == '5');
+ - text: The sixth circle element should have a cx value of 233, a cy value of 355, and an r value of 5.
+ testString: assert($('circle').eq(5).attr('cx') == '233' && $('circle').eq(5).attr('cy') == '355' && $('circle').eq(5).attr('r') == '5');
+ - text: The seventh circle element should have a cx value of 333, a cy value of 404, and an r value of 5.
+ testString: assert($('circle').eq(6).attr('cx') == '333' && $('circle').eq(6).attr('cy') == '404' && $('circle').eq(6).attr('r') == '5');
+ - text: The eighth circle element should have a cx value of 222, a cy value of 167, and an r value of 5.
+ testString: assert($('circle').eq(7).attr('cx') == '222' && $('circle').eq(7).attr('cy') == '167' && $('circle').eq(7).attr('r') == '5');
+ - text: The ninth circle element should have a cx value of 78, a cy value of 180, and an r value of 5.
+ testString: assert($('circle').eq(8).attr('cx') == '78' && $('circle').eq(8).attr('cy') == '180' && $('circle').eq(8).attr('r') == '5');
+ - text: The tenth circle element should have a cx value of 21, a cy value of 377, and an r value of 5.
+ testString: assert($('circle').eq(9).attr('cx') == '21' && $('circle').eq(9).attr('cy') == '377' && $('circle').eq(9).attr('r') == '5');
```
@@ -91,14 +95,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.russian.md
index f92b6a88b5..62c7215046 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.russian.md
@@ -2,27 +2,31 @@
id: 587d7fad367417b2b2512bdf
title: Add Axes to a Visualization
challengeType: 6
-videoUrl: ''
+forumTopicId: 301472
localeTitle: Добавление осей к визуализации
---
## Description
- Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода axisLeft() и axisBottom() для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе xScale в предыдущих задачах: const xAxis = d3.axisBottom(xScale); Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент g . Группа g обозначает группу. В отличие от rect , circle и text , ось является прямой линией, когда она отображается. Потому что это простая форма, используя g works. Последний шаг - применить атрибут transform для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы transforms , но позиционирование оси требует translate . Когда он применяется к элементу g , он перемещает всю группу за и на указанные суммы. Вот пример:
Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу call() . Ось y работает одинаково, за исключением того, что аргумент translate имеет вид (x, 0). Поскольку translate является строкой в методе attr() выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов.
+
+Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода axisLeft() и axisBottom() для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе xScale в предыдущих задачах: const xAxis = d3.axisBottom(xScale); Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент g . Группа g обозначает группу. В отличие от rect , circle и text , ось является прямой линией, когда она отображается. Потому что это простая форма, используя g works. Последний шаг - применить атрибут transform для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы transforms , но позиционирование оси требует translate . Когда он применяется к элементу g , он перемещает всю группу за и на указанные суммы. Вот пример:
Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу call() . Ось y работает одинаково, за исключением того, что аргумент translate имеет вид (x, 0). Поскольку translate является строкой в методе attr() выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов.
+
## Instructions
- График рассеяния теперь имеет ось х. Создайте ось y в переменной с именем yAxis используя метод axisLeft() . Затем визуализируйте ось с помощью элемента g . Не забудьте использовать атрибут transform для перевода оси на количество единиц заполнения справа и 0 единиц вниз. Не забудьте call() ось.
+
+График рассеяния теперь имеет ось х. Создайте ось y в переменной с именем yAxis используя метод axisLeft() . Затем визуализируйте ось с помощью элемента g . Не забудьте использовать атрибут transform для перевода оси на количество единиц заполнения справа и 0 единиц вниз. Не забудьте call() ось.
+
## Tests
```yml
tests:
- - text: Ваш код должен использовать метод axisLeft() с yScale в качестве аргумента.
- testString: 'assert(code.match(/\.axisLeft\(yScale\)/g), "Your code should use the axisLeft() method with yScale passed as the argument.");'
- - text: 'Элемент g оси y должен иметь атрибут transform для перевода оси по (60, 0).'
- testString: 'assert($("g").eq(1).attr("transform").match(/translate\(60\s*?,\s*?0\)/g), "The y-axis g element should have a transform attribute to translate the axis by (60, 0).");'
- - text: Ваш код должен вызывать yAxis .
- testString: 'assert(code.match(/\.call\(yAxis\)/g), "Your code should call the yAxis.");'
+ - text: Your code should use the axisLeft() method with yScale passed as the argument.
+ testString: assert(code.match(/\.axisLeft\(yScale\)/g));
+ - text: The y-axis g element should have a transform attribute to translate the axis by (60, 0).
+ testString: assert($('g').eq(10).attr('transform').match(/translate\(60\s*?,\s*?0\)/g));
+ - text: Your code should call the yAxis.
+ testString: assert(code.match(/\.call\(\s*yAxis\s*\)/g));
```
@@ -104,14 +108,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.russian.md
index 8413b7546b..3b654446c2 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.russian.md
@@ -2,25 +2,29 @@
id: 587d7fa7367417b2b2512bc8
title: Add Classes with D3
challengeType: 6
-videoUrl: ''
+forumTopicId: 301473
localeTitle: Добавить классы с D3
---
## Description
- Использование большого количества встроенных стилей в HTML-элементах трудно справиться даже для небольших приложений. Легче добавить класс к элементам и стиль этого класса один раз с использованием правил CSS. D3 имеет метод attr() для добавления любого элемента HTML к элементу, включая имя класса. Метод attr() работает так же, как это делает style() . Он принимает значения, разделенные запятыми, и может использовать функцию обратного вызова. Вот пример добавления класса «container» к выбору: selection.attr("class", "container");
+
+Использование большого количества встроенных стилей в HTML-элементах трудно справиться даже для небольших приложений. Легче добавить класс к элементам и стиль этого класса один раз с использованием правил CSS. D3 имеет метод attr() для добавления любого элемента HTML к элементу, включая имя класса. Метод attr() работает так же, как это делает style() . Он принимает значения, разделенные запятыми, и может использовать функцию обратного вызова. Вот пример добавления класса «container» к выбору: selection.attr("class", "container");
+
## Instructions
- Добавьте метод attr() в код в редакторе и поместите класс bar в элементы div .
+
+Добавьте метод attr() в код в редакторе и поместите класс bar в элементы div .
+
## Tests
```yml
tests:
- - text: Элементы div должны иметь класс bar .
- testString: 'assert($("div").attr("class") == "bar", "Your div elements should have a class of bar.");'
- - text: Ваш код должен использовать метод attr() .
- testString: 'assert(code.match(/\.attr/g), "Your code should use the attr() method.");'
+ - text: Your div elements should have a class of bar.
+ testString: assert($('div').attr('class') == "bar");
+ - text: Your code should use the attr() method.
+ testString: assert(code.match(/\.attr/g));
```
@@ -60,14 +64,33 @@ tests:
-
-
## Solution
-```js
-// solution required
+```html
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.russian.md
index 6a9e6bd63d..238e62e536 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.russian.md
@@ -2,33 +2,37 @@
id: 587d7fa6367417b2b2512bc2
title: Add Document Elements with D3
challengeType: 6
-videoUrl: ''
+forumTopicId: 301474
localeTitle: Добавление элементов документа с помощью D3
---
## Description
- D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод select() выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: const anchor = d3.select("a"); Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном anchor . Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: append() и text() . Метод append() принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод text() либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст:
D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке.
+
+D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод select() выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: const anchor = d3.select("a"); Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном anchor . Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: append() и text() . Метод append() принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод text() либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст:
D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке.
+
## Instructions
- Используйте метод select для выбора тега body в документе. Затем append к нему тег h1 и добавьте текст «Learning D3» в элемент h1 .
+
+Используйте метод select для выбора тега body в документе. Затем append к нему тег h1 и добавьте текст «Learning D3» в элемент h1 .
+
## Tests
```yml
tests:
- - text: body должно иметь один элемент h1 .
- testString: 'assert($("body").children("h1").length == 1, "The body should have one h1 element.");'
- - text: Элемент h1 должен иметь в нем текст «Learning D3».
- testString: 'assert($("h1").text() == "Learning D3", "The h1 element should have the text "Learning D3" in it.");'
- - text: Ваш код должен получить доступ к объекту d3 .
- testString: 'assert(code.match(/d3/g), "Your code should access the d3 object.");'
- - text: Ваш код должен использовать метод select .
- testString: 'assert(code.match(/\.select/g), "Your code should use the select method.");'
- - text: Ваш код должен использовать метод append .
- testString: 'assert(code.match(/\.append/g), "Your code should use the append method.");'
- - text: Ваш код должен использовать text метод.
- testString: 'assert(code.match(/\.text/g), "Your code should use the text method.");'
+ - text: The body should have one h1 element.
+ testString: assert($('body').children('h1').length == 1);
+ - text: The h1 element should have the text "Learning D3" in it.
+ testString: assert($('h1').text() == "Learning D3");
+ - text: Your code should access the d3 object.
+ testString: assert(code.match(/d3/g));
+ - text: Your code should use the select method.
+ testString: assert(code.match(/\.select/g));
+ - text: Your code should use the append method.
+ testString: assert(code.match(/\.append/g));
+ - text: Your code should use the text method.
+ testString: assert(code.match(/\.text/g));
```
@@ -54,14 +58,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.russian.md
index 57c6224961..bed3b28940 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.russian.md
@@ -2,25 +2,29 @@
id: 587d7fa7367417b2b2512bc6
title: Add Inline Styling to Elements
challengeType: 6
-videoUrl: ''
+forumTopicId: 301475
localeTitle: Добавить встроенный стиль в элементы
---
## Description
- D3 позволяет добавлять встроенные стили CSS для динамических элементов с помощью метода style() . Метод style() принимает в качестве аргумента пару ключ-значение, разделенную запятыми. Вот пример, чтобы задать цвет текста выбора синим: selection.style("color","blue");
+
+D3 позволяет добавлять встроенные стили CSS для динамических элементов с помощью метода style() . Метод style() принимает в качестве аргумента пару ключ-значение, разделенную запятыми. Вот пример, чтобы задать цвет текста выбора синим: selection.style("color","blue");
+
## Instructions
- Добавьте метод style() в код в редакторе, чтобы весь отображаемый текст имел font-familyverdana .
+
+Добавьте метод style() в код в редакторе, чтобы весь отображаемый текст имел font-familyverdana .
+
## Tests
```yml
tests:
- - text: Элементы h2 должны иметь font-family шрифтов verdana.
- testString: 'assert($("h2").css("font-family") == "verdana", "Your h2 elements should have a font-family of verdana.");'
- - text: ''
- testString: 'assert(code.match(/\.style/g), "Your code should use the style() method.");'
+ - text: Your h2 elements should have a font-family of verdana.
+ testString: assert($('h2').css('font-family') == 'verdana');
+ - text: Your code should use the style() method.
+ testString: assert(code.match(/\.style/g));
```
@@ -53,14 +57,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.russian.md
index cb49c56211..8749b8304b 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.russian.md
@@ -2,39 +2,43 @@
id: 587d7faa367417b2b2512bd2
title: Add Labels to D3 Elements
challengeType: 6
-videoUrl: ''
+forumTopicId: 301476
localeTitle: Добавить ярлыки в элементы D3
---
## Description
- D3 позволяет вам наметить элемент графа, например панель, используя text элемент SVG. Подобно элементу rect , text элемент должен иметь атрибуты x и y , чтобы поместить его на холст SVG. Он также должен получить доступ к данным для отображения этих значений. D3 дает вам высокий уровень контроля над тем, как вы назовете свои бары.
+
+D3 позволяет вам наметить элемент графа, например панель, используя text элемент SVG. Подобно элементу rect , text элемент должен иметь атрибуты x и y , чтобы поместить его на холст SVG. Он также должен получить доступ к данным для отображения этих значений. D3 дает вам высокий уровень контроля над тем, как вы назовете свои бары.
+
## Instructions
- Код в редакторе уже привязывает данные к каждому новому text элементу. Сначала добавьте text узлы в svg . Затем добавьте атрибуты для координат x и y . Они должны быть рассчитаны так же, как и rect , за исключением того, что значение y для text должно помещать ярлык на 3 единицы выше, чем планка. Наконец, используйте метод D3 text() чтобы установить метку равной значению точки данных. Заметка Чтобы ярлык находился выше бара, решите, должно ли значение y для text быть на 3 больше или на 3 меньше значения y для панели.
+
+Код в редакторе уже привязывает данные к каждому новому text элементу. Сначала добавьте text узлы в svg . Затем добавьте атрибуты для координат x и y . Они должны быть рассчитаны так же, как и rect , за исключением того, что значение y для text должно помещать ярлык на 3 единицы выше, чем планка. Наконец, используйте метод D3 text() чтобы установить метку равной значению точки данных. Заметка Чтобы ярлык находился выше бара, решите, должно ли значение y для text быть на 3 больше или на 3 меньше значения y для панели.
+
## Tests
```yml
tests:
- - text: Первый text элемент должен иметь метку 12 и значение y 61.
- testString: 'assert($("text").eq(0).text() == "12" && $("text").eq(0).attr("y") == "61", "The first text element should have a label of 12 and a y value of 61.");'
- - text: Второй text элемент должен иметь метку 31 и значение y 4.
- testString: 'assert($("text").eq(1).text() == "31" && $("text").eq(1).attr("y") == "4", "The second text element should have a label of 31 and a y value of 4.");'
- - text: Третий text элемент должен иметь метку 22 и значение y 31.
- testString: 'assert($("text").eq(2).text() == "22" && $("text").eq(2).attr("y") == "31", "The third text element should have a label of 22 and a y value of 31.");'
- - text: Четвертый text элемент должен иметь метку 17 и значение y 46.
- testString: 'assert($("text").eq(3).text() == "17" && $("text").eq(3).attr("y") == "46", "The fourth text element should have a label of 17 and a y value of 46.");'
- - text: Пятый text элемент должен иметь метку 25 и значение y 22.
- testString: 'assert($("text").eq(4).text() == "25" && $("text").eq(4).attr("y") == "22", "The fifth text element should have a label of 25 and a y value of 22.");'
- - text: Шестой text элемент должен иметь метку 18 и значение y 43.
- testString: 'assert($("text").eq(5).text() == "18" && $("text").eq(5).attr("y") == "43", "The sixth text element should have a label of 18 and a y value of 43.");'
- - text: Седьмой text элемент должен иметь метку 29 и значение y 10.
- testString: 'assert($("text").eq(6).text() == "29" && $("text").eq(6).attr("y") == "10", "The seventh text element should have a label of 29 and a y value of 10.");'
- - text: Восьмой text элемент должен иметь метку 14 и значение y 55.
- testString: 'assert($("text").eq(7).text() == "14" && $("text").eq(7).attr("y") == "55", "The eighth text element should have a label of 14 and a y value of 55.");'
- - text: Девятый text элемент должен иметь метку 9 и значение y 70.
- testString: 'assert($("text").eq(8).text() == "9" && $("text").eq(8).attr("y") == "70", "The ninth text element should have a label of 9 and a y value of 70.");'
+ - text: The first text element should have a label of 12 and a y value of 61.
+ testString: assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
+ - text: The second text element should have a label of 31 and a y value of 4.
+ testString: assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
+ - text: The third text element should have a label of 22 and a y value of 31.
+ testString: assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
+ - text: The fourth text element should have a label of 17 and a y value of 46.
+ testString: assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
+ - text: The fifth text element should have a label of 25 and a y value of 22.
+ testString: assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
+ - text: The sixth text element should have a label of 18 and a y value of 43.
+ testString: assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
+ - text: The seventh text element should have a label of 29 and a y value of 10.
+ testString: assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
+ - text: The eighth text element should have a label of 14 and a y value of 55.
+ testString: assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
+ - text: The ninth text element should have a label of 9 and a y value of 70.
+ testString: assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
```
@@ -84,14 +88,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.russian.md
index 0111778076..efc7b208ba 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.russian.md
@@ -2,43 +2,49 @@
id: 587d7fab367417b2b2512bd9
title: Add Labels to Scatter Plot Circles
challengeType: 6
-videoUrl: ''
+forumTopicId: 301477
localeTitle: Добавить ярлыки в круги кругов рассеяния
---
## Description
-undefined
+
+You can add text to create labels for the points in a scatter plot.
+The goal is to display the comma-separated values for the first (x) and second (y) fields of each item in dataset.
+The text nodes need x and y attributes to position it on the SVG canvas. In this challenge, the y value (which determines height) can use the same value that the circle uses for its cy attribute. The x value can be slightly larger than the cx value of the circle, so the label is visible. This will push the label to the right of the plotted point.
+
## Instructions
- Обозначьте каждую точку на графике рассеяния, используя text элементы. Текст метки должен быть двумя значениями, разделенными запятой и пробелом. Например, ярлык для первой точки - «34, 78». Установите атрибут x чтобы он был на 5 единиц больше, чем значение, которое вы использовали для атрибута cx на circle . Установите атрибут y же, как это используется для значения cy на circle .
+
+Обозначьте каждую точку на графике рассеяния, используя text элементы. Текст метки должен быть двумя значениями, разделенными запятой и пробелом. Например, ярлык для первой точки - «34, 78». Установите атрибут x чтобы он был на 5 единиц больше, чем значение, которое вы использовали для атрибута cx на circle . Установите атрибут y же, как это используется для значения cy на circle .
+
## Tests
```yml
tests:
- - text: Ваш код должен содержать 10 text элементов.
- testString: 'assert($("text").length == 10, "Your code should have 10 text elements.");'
- - text: 'Первая метка должна иметь текст «34, 78», значение x 39 и значение y 422.'
- testString: 'assert($("text").eq(0).text() == "34, 78" && $("text").eq(0).attr("x") == "39" && $("text").eq(0).attr("y") == "422", "The first label should have text of "34, 78", an x value of 39, and a y value of 422.");'
- - text: 'Вторая метка должна иметь текст «109, 280», в x значении 114, и y значения 220.'
- testString: 'assert($("text").eq(1).text() == "109, 280" && $("text").eq(1).attr("x") == "114" && $("text").eq(1).attr("y") == "220", "The second label should have text of "109, 280", an x value of 114, and a y value of 220.");'
- - text: 'Третья метка должна иметь текст «310, 120», значение x 315 и значение y 380.'
- testString: 'assert($("text").eq(2).text() == "310, 120" && $("text").eq(2).attr("x") == "315" && $("text").eq(2).attr("y") == "380", "The third label should have text of "310, 120", an x value of 315, and a y value of 380.");'
- - text: 'Четвертая метка должна иметь текст «79, 411», значение x 84 и значение y 89.'
- testString: 'assert($("text").eq(3).text() == "79, 411" && $("text").eq(3).attr("x") == "84" && $("text").eq(3).attr("y") == "89", "The fourth label should have text of "79, 411", an x value of 84, and a y value of 89.");'
- - text: 'Пятая метка должна иметь текст «420, 220», значение x 425 и значение y 280.'
- testString: 'assert($("text").eq(4).text() == "420, 220" && $("text").eq(4).attr("x") == "425" && $("text").eq(4).attr("y") == "280", "The fifth label should have text of "420, 220", an x value of 425, and a y value of 280.");'
- - text: 'Шестой ярлык должен иметь текст «233, 145», значение x 238 и значение y 355.'
- testString: 'assert($("text").eq(5).text() == "233, 145" && $("text").eq(5).attr("x") == "238" && $("text").eq(5).attr("y") == "355", "The sixth label should have text of "233, 145", an x value of 238, and a y value of 355.");'
- - text: 'Седьмая метка должна иметь текст «333, 96», значение x 338 и значение y 404.'
- testString: 'assert($("text").eq(6).text() == "333, 96" && $("text").eq(6).attr("x") == "338" && $("text").eq(6).attr("y") == "404", "The seventh label should have text of "333, 96", an x value of 338, and a y value of 404.");'
- - text: 'Восьмая метка должна иметь текст «222, 333», значение x 227 и значение y 167.'
- testString: 'assert($("text").eq(7).text() == "222, 333" && $("text").eq(7).attr("x") == "227" && $("text").eq(7).attr("y") == "167", "The eighth label should have text of "222, 333", an x value of 227, and a y value of 167.");'
- - text: 'Девятая метка должна иметь текст «78, 320», значение x 83 и значение y 180.'
- testString: 'assert($("text").eq(8).text() == "78, 320" && $("text").eq(8).attr("x") == "83" && $("text").eq(8).attr("y") == "180", "The ninth label should have text of "78, 320", an x value of 83, and a y value of 180.");'
- - text: 'Десятая метка должна иметь текст «21, 123», значение x 26 и значение y 377.'
- testString: 'assert($("text").eq(9).text() == "21, 123" && $("text").eq(9).attr("x") == "26" && $("text").eq(9).attr("y") == "377", "The tenth label should have text of "21, 123", an x value of 26, and a y value of 377.");'
+ - text: Your code should have 10 text elements.
+ testString: assert($('text').length == 10);
+ - text: The first label should have text of "34, 78", an x value of 39, and a y value of 422.
+ testString: assert($('text').eq(0).text() == '34, 78' && $('text').eq(0).attr('x') == '39' && $('text').eq(0).attr('y') == '422');
+ - text: The second label should have text of "109, 280", an x value of 114, and a y value of 220.
+ testString: assert($('text').eq(1).text() == '109, 280' && $('text').eq(1).attr('x') == '114' && $('text').eq(1).attr('y') == '220');
+ - text: The third label should have text of "310, 120", an x value of 315, and a y value of 380.
+ testString: assert($('text').eq(2).text() == '310, 120' && $('text').eq(2).attr('x') == '315' && $('text').eq(2).attr('y') == '380');
+ - text: The fourth label should have text of "79, 411", an x value of 84, and a y value of 89.
+ testString: assert($('text').eq(3).text() == '79, 411' && $('text').eq(3).attr('x') == '84' && $('text').eq(3).attr('y') == '89');
+ - text: The fifth label should have text of "420, 220", an x value of 425, and a y value of 280.
+ testString: assert($('text').eq(4).text() == '420, 220' && $('text').eq(4).attr('x') == '425' && $('text').eq(4).attr('y') == '280');
+ - text: The sixth label should have text of "233, 145", an x value of 238, and a y value of 355.
+ testString: assert($('text').eq(5).text() == '233, 145' && $('text').eq(5).attr('x') == '238' && $('text').eq(5).attr('y') == '355');
+ - text: The seventh label should have text of "333, 96", an x value of 338, and a y value of 404.
+ testString: assert($('text').eq(6).text() == '333, 96' && $('text').eq(6).attr('x') == '338' && $('text').eq(6).attr('y') == '404');
+ - text: The eighth label should have text of "222, 333", an x value of 227, and a y value of 167.
+ testString: assert($('text').eq(7).text() == '222, 333' && $('text').eq(7).attr('x') == '227' && $('text').eq(7).attr('y') == '167');
+ - text: The ninth label should have text of "78, 320", an x value of 83, and a y value of 180.
+ testString: assert($('text').eq(8).text() == '78, 320' && $('text').eq(8).attr('x') == '83' && $('text').eq(8).attr('y') == '180');
+ - text: The tenth label should have text of "21, 123", an x value of 26, and a y value of 377.
+ testString: assert($('text').eq(9).text() == '21, 123' && $('text').eq(9).attr('x') == '26' && $('text').eq(9).attr('y') == '377');
```
@@ -98,14 +104,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.russian.md
index 7b186de491..ed213b7236 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.russian.md
@@ -2,39 +2,44 @@
id: 587d7fa7367417b2b2512bc7
title: Change Styles Based on Data
challengeType: 6
-videoUrl: ''
+forumTopicId: 301479
localeTitle: Изменение стилей на основе данных
---
## Description
- D3 - о визуализации и представлении данных. Вероятно, вы захотите изменить стиль элементов на основе данных. Вы можете использовать функцию обратного вызова в методе style() для изменения стиля для разных элементов. Например, вы можете покрасить синюю точку данных, если она имеет значение менее 20, и наоборот. Вы можете использовать функцию обратного вызова в методе style() и включать условную логику. Функция обратного вызова использует параметр d для представления точки данных:
selection.style ("color", (d) => { / * Логика, возвращающая цвет, основанный на условии * / });
Метод style() не ограничивается настройкой color - его можно использовать и с другими свойствами CSS.
+
+D3 - о визуализации и представлении данных. Вероятно, вы захотите изменить стиль элементов на основе данных. Вы можете использовать функцию обратного вызова в методе style() для изменения стиля для разных элементов. Например, вы можете покрасить синюю точку данных, если она имеет значение менее 20, и наоборот. Вы можете использовать функцию обратного вызова в методе style() и включать условную логику. Функция обратного вызова использует параметр d для представления точки данных:
selection.style ("color", (d) => { / * Логика, возвращающая цвет, основанный на условии * / });
Метод style() не ограничивается настройкой color - его можно использовать и с другими свойствами CSS.
+
## Instructions
-undefined
+
+Add the style() method to the code in the editor to set the color of the h2 elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green".
+Note You can use if-else logic, or the ternary operator.
+
## Tests
```yml
tests:
- - text: Первый h2 должен иметь color красного цвета.
- testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first h2 should have a color of red.");'
- - text: Второй h2 должен иметь color зеленого цвета.
- testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second h2 should have a color of green.");'
- - text: Третий h2 должен иметь color зеленого цвета.
- testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third h2 should have a color of green.");'
- - text: ''
- testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth h2 should have a color of red.");'
- - text: Пятые h2 должны иметь color зеленого цвета.
- testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth h2 should have a color of green.");'
- - text: ''
- testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth h2 should have a color of red.");'
- - text: ''
- testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh h2 should have a color of green.");'
- - text: ''
- testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth h2 should have a color of red.");'
- - text: ''
- testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth h2 should have a color of red.");'
+ - text: The first h2 should have a color of red.
+ testString: assert($('h2').eq(0).css('color') == "rgb(255, 0, 0)");
+ - text: The second h2 should have a color of green.
+ testString: assert($('h2').eq(1).css('color') == "rgb(0, 128, 0)");
+ - text: The third h2 should have a color of green.
+ testString: assert($('h2').eq(2).css('color') == "rgb(0, 128, 0)");
+ - text: The fourth h2 should have a color of red.
+ testString: assert($('h2').eq(3).css('color') == "rgb(255, 0, 0)");
+ - text: The fifth h2 should have a color of green.
+ testString: assert($('h2').eq(4).css('color') == "rgb(0, 128, 0)");
+ - text: The sixth h2 should have a color of red.
+ testString: assert($('h2').eq(5).css('color') == "rgb(255, 0, 0)");
+ - text: The seventh h2 should have a color of green.
+ testString: assert($('h2').eq(6).css('color') == "rgb(0, 128, 0)");
+ - text: The eighth h2 should have a color of red.
+ testString: assert($('h2').eq(7).css('color') == "rgb(255, 0, 0)");
+ - text: The ninth h2 should have a color of red.
+ testString: assert($('h2').eq(8).css('color') == "rgb(255, 0, 0)");
```
@@ -67,14 +72,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.russian.md
index 3cc17d1b6c..970bfa3bd8 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.russian.md
@@ -2,23 +2,27 @@
id: 587d7fa9367417b2b2512bd1
title: Change the Color of an SVG Element
challengeType: 6
-videoUrl: ''
+forumTopicId: 301480
localeTitle: Изменение цвета элемента SVG
---
## Description
- Бары находятся в правильном положении, но все они имеют черный цвет. SVG имеет способ изменить цвет баров. В SVG rect форма окрашена с атрибутом fill . Он поддерживает шестнадцатеричные коды, имена цветов и значения rgb, а также более сложные параметры, такие как градиенты и прозрачность.
+
+Бары находятся в правильном положении, но все они имеют черный цвет. SVG имеет способ изменить цвет баров. В SVG rect форма окрашена с атрибутом fill . Он поддерживает шестнадцатеричные коды, имена цветов и значения rgb, а также более сложные параметры, такие как градиенты и прозрачность.
+
## Instructions
- Добавьте метод attr() чтобы установить «заливку» всех баров на цвет «флот».
+
+Добавьте метод attr() чтобы установить «заливку» всех баров на цвет «флот».
+
## Tests
```yml
tests:
- - text: Все бары должны иметь цвет fill флота.
- testString: 'assert($("rect").css("fill") == "rgb(0, 0, 128)", "The bars should all have a fill color of navy.");'
+ - text: The bars should all have a fill color of navy.
+ testString: assert($('rect').css('fill') == "rgb(0, 0, 128)");
```
@@ -62,14 +66,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.russian.md
index 70cd4bc519..7465f2777e 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.russian.md
@@ -2,39 +2,43 @@
id: 587d7fa8367417b2b2512bca
title: Change the Presentation of a Bar Chart
challengeType: 6
-videoUrl: ''
+forumTopicId: 301481
localeTitle: Изменение презентации диаграммы
---
## Description
- Последняя задача создала гистограмму, но есть несколько изменений форматирования, которые могли бы ее улучшить: 1) добавьте пробел между каждым столбцом, чтобы визуально отделить их, что делается путем добавления поля к CSS для класса bar 2) Увеличить высота баров, чтобы лучше показать разницу в значениях, что делается путем умножения значения на число для масштабирования высоты
+
+Последняя задача создала гистограмму, но есть несколько изменений форматирования, которые могли бы ее улучшить: 1) добавьте пробел между каждым столбцом, чтобы визуально отделить их, что делается путем добавления поля к CSS для класса bar 2) Увеличить высота баров, чтобы лучше показать разницу в значениях, что делается путем умножения значения на число для масштабирования высоты
+
## Instructions
- Во- первых, добавьте margin в 2px в bar класса в style тега. Затем измените функцию обратного вызова в методе style() чтобы она вернула значение в 10 раз по сравнению с исходным значением данных (плюс «px»). Заметка Умножение каждой точки данных на одну и ту же константу только изменяет масштаб. Это похоже на масштабирование, и оно не меняет значения базовых данных.
+
+Во- первых, добавьте margin в 2px в bar класса в style тега. Затем измените функцию обратного вызова в методе style() чтобы она вернула значение в 10 раз по сравнению с исходным значением данных (плюс «px»). Заметка Умножение каждой точки данных на одну и ту же константу только изменяет масштаб. Это похоже на масштабирование, и оно не меняет значения базовых данных.
+
## Tests
```yml
tests:
- - text: Первый div должен иметь height 120 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(0).css("height") == "120px" && $("div").eq(0).css("margin-right") == "2px", "The first div should have a height of 120 pixels and a margin of 2 pixels.");'
- - text: Второй div должен иметь height 310 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(1).css("height") == "310px" && $("div").eq(1).css("margin-right") == "2px", "The second div should have a height of 310 pixels and a margin of 2 pixels.");'
- - text: Третий div должен иметь height 220 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(2).css("height") == "220px" && $("div").eq(2).css("margin-right") == "2px", "The third div should have a height of 220 pixels and a margin of 2 pixels.");'
- - text: Четвертый div должен иметь height 170 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(3).css("height") == "170px" && $("div").eq(3).css("margin-right") == "2px", "The fourth div should have a height of 170 pixels and a margin of 2 pixels.");'
- - text: Пятый div должен иметь height 250 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(4).css("height") == "250px" && $("div").eq(4).css("margin-right") == "2px", "The fifth div should have a height of 250 pixels and a margin of 2 pixels.");'
- - text: Шестой div должен иметь height 180 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(5).css("height") == "180px" && $("div").eq(5).css("margin-right") == "2px", "The sixth div should have a height of 180 pixels and a margin of 2 pixels.");'
- - text: Седьмой div должен иметь height 290 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(6).css("height") == "290px" && $("div").eq(6).css("margin-right") == "2px", "The seventh div should have a height of 290 pixels and a margin of 2 pixels.");'
- - text: Восьмой div должен иметь height 140 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(7).css("height") == "140px" && $("div").eq(7).css("margin-right") == "2px", "The eighth div should have a height of 140 pixels and a margin of 2 pixels.");'
- - text: Девятый div должен иметь height 90 пикселей и margin в 2 пикселя.
- testString: 'assert($("div").eq(8).css("height") == "90px" && $("div").eq(8).css("margin-right") == "2px", "The ninth div should have a height of 90 pixels and a margin of 2 pixels.");'
+ - text: The first div should have a height of 120 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(0).css('height') == '120px' && $('div').eq(0).css('margin-right') == '2px');
+ - text: The second div should have a height of 310 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(1).css('height') == '310px' && $('div').eq(1).css('margin-right') == '2px');
+ - text: The third div should have a height of 220 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(2).css('height') == '220px' && $('div').eq(2).css('margin-right') == '2px');
+ - text: The fourth div should have a height of 170 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(3).css('height') == '170px' && $('div').eq(3).css('margin-right') == '2px');
+ - text: The fifth div should have a height of 250 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(4).css('height') == '250px' && $('div').eq(4).css('margin-right') == '2px');
+ - text: The sixth div should have a height of 180 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(5).css('height') == '180px' && $('div').eq(5).css('margin-right') == '2px');
+ - text: The seventh div should have a height of 290 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(6).css('height') == '290px' && $('div').eq(6).css('margin-right') == '2px');
+ - text: The eighth div should have a height of 140 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(7).css('height') == '140px' && $('div').eq(7).css('margin-right') == '2px');
+ - text: The ninth div should have a height of 90 pixels and a margin of 2 pixels.
+ testString: assert($('div').eq(8).css('height') == '90px' && $('div').eq(8).css('margin-right') == '2px');
```
@@ -77,14 +81,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.russian.md
index 70c01ce797..e5fa1364e3 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.russian.md
@@ -2,29 +2,33 @@
id: 587d7fa8367417b2b2512bcd
title: Create a Bar for Each Data Point in the Set
challengeType: 6
-videoUrl: ''
+forumTopicId: 301482
localeTitle: Создайте панель для каждой точки данных в наборе
---
## Description
- Последняя задача добавила только один прямоугольник в элемент svg для представления строки. Здесь вы объедините все, что вы узнали до сих пор, о формах data() , enter() и SVG для создания и добавления прямоугольника для каждой точки dataset в dataset . Предыдущий вызов показал формат создания и добавления div для каждого элемента в dataset :
Есть несколько отличий, которые работают с rect элементами вместо divs . rects должны быть добавлены к элементу svg , а не непосредственно к body . Кроме того, вам нужно указать D3, где разместить каждый rect в области svg . Размещение бар будет рассмотрено в следующей задаче.
+
+Последняя задача добавила только один прямоугольник в элемент svg для представления строки. Здесь вы объедините все, что вы узнали до сих пор, о формах data() , enter() и SVG для создания и добавления прямоугольника для каждой точки dataset в dataset . Предыдущий вызов показал формат создания и добавления div для каждого элемента в dataset :
Есть несколько отличий, которые работают с rect элементами вместо divs . rects должны быть добавлены к элементу svg , а не непосредственно к body . Кроме того, вам нужно указать D3, где разместить каждый rect в области svg . Размещение бар будет рассмотрено в следующей задаче.
+
## Instructions
- Используйте методы data() , enter() и append() для создания и добавления rect для каждого элемента в dataset . Бары должны отображать все друг на друга, это будет исправлено в следующей задаче.
+
+Используйте методы data() , enter() и append() для создания и добавления rect для каждого элемента в dataset . Бары должны отображать все друг на друга, это будет исправлено в следующей задаче.
+
## Tests
```yml
tests:
- - text: Ваш документ должен иметь 9 rect элементы.
- testString: 'assert($("rect").length == 9, "Your document should have 9 rect elements.");'
- - text: Ваш код должен использовать метод data() .
- testString: 'assert(code.match(/\.data/g), "Your code should use the data() method.");'
- - text: Ваш код должен использовать метод enter() .
- testString: 'assert(code.match(/\.enter/g), "Your code should use the enter() method.");'
- - text: Ваш код должен использовать метод append() .
- testString: 'assert(code.match(/\.append/g), "Your code should use the append() method.");'
+ - text: Your document should have 9 rect elements.
+ testString: assert($('rect').length == 9);
+ - text: Your code should use the data() method.
+ testString: assert(code.match(/\.data/g));
+ - text: Your code should use the enter() method.
+ testString: assert(code.match(/\.enter/g));
+ - text: Your code should use the append() method.
+ testString: assert(code.match(/\.append/g));
```
@@ -65,14 +69,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.russian.md
index ea1687a308..98ad8a9fbc 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.russian.md
@@ -2,27 +2,31 @@
id: 587d7fab367417b2b2512bda
title: Create a Linear Scale with D3
challengeType: 6
-videoUrl: ''
+forumTopicId: 301483
localeTitle: Создайте линейную шкалу с D3
---
## Description
- Графики штрихов и диаграмм рассеяния отображают данные непосредственно на холст SVG. Однако, если высота бара или одной из точек данных больше, чем значения высоты или ширины SVG, она выходит за пределы области SVG. В D3 существуют шкалы, которые помогают отображать данные. Scales - это функции, которые сообщают программе, как сопоставить набор необработанных точек данных на пикселях холста SVG. Например, скажем, у вас есть холст SVG размером 100 × 500 и вы хотите построить валовой внутренний продукт (ВВП) для ряда стран. Набор чисел будет в диапазоне миллиардов или триллионов долларов. Вы предоставляете D3 тип шкалы, чтобы рассказать о том, как разместить большие значения ВВП в этой области размером 100x500. Маловероятно, что вы будете строить необработанные данные как есть. Перед построением графика вы установите масштаб для всего набора данных, чтобы значения x и y соответствовали ширине и высоте холста. D3 имеет несколько типов шкалы. Для линейного масштаба (обычно используется с количественными данными) существует метод D3 scaleLinear() : const scale = d3.scaleLinear() По умолчанию масштаб использует отношение идентичности. Значение входа совпадает с значением выхода. Отдельная проблема охватывает то, как это изменить.
+
+Графики штрихов и диаграмм рассеяния отображают данные непосредственно на холст SVG. Однако, если высота бара или одной из точек данных больше, чем значения высоты или ширины SVG, она выходит за пределы области SVG. В D3 существуют шкалы, которые помогают отображать данные. Scales - это функции, которые сообщают программе, как сопоставить набор необработанных точек данных на пикселях холста SVG. Например, скажем, у вас есть холст SVG размером 100 × 500 и вы хотите построить валовой внутренний продукт (ВВП) для ряда стран. Набор чисел будет в диапазоне миллиардов или триллионов долларов. Вы предоставляете D3 тип шкалы, чтобы рассказать о том, как разместить большие значения ВВП в этой области размером 100x500. Маловероятно, что вы будете строить необработанные данные как есть. Перед построением графика вы установите масштаб для всего набора данных, чтобы значения x и y соответствовали ширине и высоте холста. D3 имеет несколько типов шкалы. Для линейного масштаба (обычно используется с количественными данными) существует метод D3 scaleLinear() : const scale = d3.scaleLinear() По умолчанию масштаб использует отношение идентичности. Значение входа совпадает с значением выхода. Отдельная проблема охватывает то, как это изменить.
+
## Instructions
- Измените scale переменную, чтобы создать линейную шкалу. Затем установите output переменную в шкалу с аргументом ввода 50.
+
+Измените scale переменную, чтобы создать линейную шкалу. Затем установите output переменную в шкалу с аргументом ввода 50.
+
## Tests
```yml
tests:
- - text: Текст в h2 должен быть 50.
- testString: 'assert($("h2").text() == "50", "The text in the h2 should be 50.");'
- - text: Ваш код должен использовать метод scaleLinear() .
- testString: 'assert(code.match(/\.scaleLinear/g), "Your code should use the scaleLinear() method.");'
- - text: output переменная должна вызывать scale с аргументом 50.
- testString: 'assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), "The output variable should call scale with an argument of 50.");'
+ - text: The text in the h2 should be 50.
+ testString: assert($('h2').text() == '50');
+ - text: Your code should use the scaleLinear() method.
+ testString: assert(code.match(/\.scaleLinear/g));
+ - text: The output variable should call scale with an argument of 50.
+ testString: assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
```
@@ -54,14 +58,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.russian.md
index 72c04b03b6..ac0d3afb81 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.russian.md
@@ -2,23 +2,27 @@
id: 587d7fab367417b2b2512bd7
title: Create a Scatterplot with SVG Circles
challengeType: 6
-videoUrl: ''
+forumTopicId: 301484
localeTitle: Создайте Scatterplot с кругами SVG
---
## Description
- График рассеяния - это еще один вид визуализации. Он обычно использует круги для сопоставления точек данных, каждая из которых имеет по два значения. Эти значения привязываются к осям x и y и используются для позиционирования круга при визуализации. SVG имеет circle тег для создания формы круга. Он очень похож на элементы rect которые вы использовали для гистограммы.
+
+График рассеяния - это еще один вид визуализации. Он обычно использует круги для сопоставления точек данных, каждая из которых имеет по два значения. Эти значения привязываются к осям x и y и используются для позиционирования круга при визуализации. SVG имеет circle тег для создания формы круга. Он очень похож на элементы rect которые вы использовали для гистограммы.
+
## Instructions
- Используйте методы data() , enter() и append() для привязки dataset к новым элементам circle , которые добавляются к холсту SVG. Заметка Круги не будут видны, потому что мы еще не установили их атрибуты. Мы сделаем это в следующей задаче.
+
+Используйте методы data() , enter() и append() для привязки dataset к новым элементам circle , которые добавляются к холсту SVG. Заметка Круги не будут видны, потому что мы еще не установили их атрибуты. Мы сделаем это в следующей задаче.
+
## Tests
```yml
tests:
- - text: Ваш код должен содержать 10 элементов circle .
- testString: 'assert($("circle").length == 10, "Your code should have 10 circle elements.");'
+ - text: Your code should have 10 circle elements.
+ testString: assert($('circle').length == 10);
```
@@ -68,14 +72,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.russian.md
index 7693fe94aa..4bc27f453c 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.russian.md
@@ -2,31 +2,39 @@
id: 587d7fa8367417b2b2512bcc
title: Display Shapes with SVG
challengeType: 6
-videoUrl: ''
+forumTopicId: 301485
localeTitle: Отображать фигуры с помощью SVG
---
## Description
-undefined
+
+The last challenge created an svg element with a given width and height, which was visible because it had a background-color applied to it in the style tag. The code made space for the given width and height.
+The next step is to create a shape to put in the svg area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (<rect>) SVG shape could create a bar in a bar chart.
+When you place a shape into the svg area, you can specify where it goes with x and y coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for x push the shape to the right, and positive values for y push the shape down from the origin point.
+To place a shape in the middle of the 500 (width) x 100 (height) svg from last challenge, the x coordinate would be 250 and the y coordinate would be 50.
+An SVG rect has four attributes. There are the x and y coordinates for where it is placed in the svg area. It also has a height and width to specify the size.
+
## Instructions
- Добавьте rect форму в svg используя append() , и присвойте ему атрибут width 25 и атрибут height 100. Также дайте атрибутам rectx и y каждый из которых установлен в 0.
+
+Добавьте rect форму в svg используя append() , и присвойте ему атрибут width 25 и атрибут height 100. Также дайте атрибутам rectx и y каждый из которых установлен в 0.
+
## Tests
```yml
tests:
- - text: В вашем документе должен быть 1 элемент rect .
- testString: 'assert($("rect").length == 1, "Your document should have 1 rect element.");'
- - text: Элемент rect должен иметь атрибут width равный 25.
- testString: 'assert($("rect").attr("width") == "25", "The rect element should have a width attribute set to 25.");'
- - text: Элемент rect должен иметь атрибут height равный 100.
- testString: 'assert($("rect").attr("height") == "100", "The rect element should have a height attribute set to 100.");'
- - text: Элемент rect должен иметь атрибут x равный 0.
- testString: 'assert($("rect").attr("x") == "0", "The rect element should have an x attribute set to 0.");'
- - text: ''
- testString: 'assert($("rect").attr("y") == "0", "The rect element should have a y attribute set to 0.");'
+ - text: Your document should have 1 rect element.
+ testString: assert($('rect').length == 1);
+ - text: The rect element should have a width attribute set to 25.
+ testString: assert($('rect').attr('width') == '25');
+ - text: The rect element should have a height attribute set to 100.
+ testString: assert($('rect').attr('height') == '100');
+ - text: The rect element should have an x attribute set to 0.
+ testString: assert($('rect').attr('x') == '0');
+ - text: The rect element should have a y attribute set to 0.
+ testString: assert($('rect').attr('y') == '0');
```
@@ -61,14 +69,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.russian.md
index 991079b5c0..c239ed16f5 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.russian.md
@@ -2,39 +2,43 @@
id: 587d7fa9367417b2b2512bcf
title: Dynamically Change the Height of Each Bar
challengeType: 6
-videoUrl: ''
+forumTopicId: 301486
localeTitle: Динамическое изменение высоты каждой панели
---
## Description
- Высота каждой панели может быть установлена на значение точки данных в массиве, подобно тому, как значение x было задано динамически.
selection.attr ("свойство", (d, i) => { / * * d - значение точки данных * i - индекс точки данных в массиве * / })
+
+Высота каждой панели может быть установлена на значение точки данных в массиве, подобно тому, как значение x было задано динамически.
selection.attr ("свойство", (d, i) => { / * * d - значение точки данных * i - индекс точки данных в массиве * / })
+
## Instructions
- Измените функцию обратного вызова для атрибута height чтобы вернуть значение времени данных 3. Примечание. Помните, что умножение всех точек данных на одну и ту же константу масштабирует данные (например, масштабирование). Это помогает увидеть различия между значениями бар в этом примере.
+
+Измените функцию обратного вызова для атрибута height чтобы вернуть значение времени данных 3. Примечание. Помните, что умножение всех точек данных на одну и ту же константу масштабирует данные (например, масштабирование). Это помогает увидеть различия между значениями бар в этом примере.
+
## Tests
```yml
tests:
- - text: Первый rect должен иметь height 36.
- testString: 'assert($("rect").eq(0).attr("height") == "36", "The first rect should have a height of 36.");'
- - text: Второй rect должен иметь height 93.
- testString: 'assert($("rect").eq(1).attr("height") == "93", "The second rect should have a height of 93.");'
- - text: Третий rect должен иметь height 66.
- testString: 'assert($("rect").eq(2).attr("height") == "66", "The third rect should have a height of 66.");'
- - text: Четвертый rect должен иметь height 51.
- testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth rect should have a height of 51.");'
- - text: Пятый rect должен иметь height 75.
- testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth rect should have a height of 75.");'
- - text: Шестой rect должен иметь height 54.
- testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth rect should have a height of 54.");'
- - text: Седьмой rect должен иметь height 87.
- testString: 'assert($("rect").eq(6).attr("height") == "87", "The seventh rect should have a height of 87.");'
- - text: Восьмой rect должен иметь height 42.
- testString: 'assert($("rect").eq(7).attr("height") == "42", "The eighth rect should have a height of 42.");'
- - text: Девятый rect должен иметь height 27.
- testString: 'assert($("rect").eq(8).attr("height") == "27", "The ninth rect should have a height of 27.");'
+ - text: The first rect should have a height of 36.
+ testString: assert($('rect').eq(0).attr('height') == '36');
+ - text: The second rect should have a height of 93.
+ testString: assert($('rect').eq(1).attr('height') == '93');
+ - text: The third rect should have a height of 66.
+ testString: assert($('rect').eq(2).attr('height') == '66');
+ - text: The fourth rect should have a height of 51.
+ testString: assert($('rect').eq(3).attr('height') == '51');
+ - text: The fifth rect should have a height of 75.
+ testString: assert($('rect').eq(4).attr('height') == '75');
+ - text: The sixth rect should have a height of 54.
+ testString: assert($('rect').eq(5).attr('height') == '54');
+ - text: The seventh rect should have a height of 87.
+ testString: assert($('rect').eq(6).attr('height') == '87');
+ - text: The eighth rect should have a height of 42.
+ testString: assert($('rect').eq(7).attr('height') == '42');
+ - text: The ninth rect should have a height of 27.
+ testString: assert($('rect').eq(8).attr('height') == '27');
```
@@ -79,14 +83,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.russian.md
index 01aab00a8b..c3eb207f9b 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.russian.md
@@ -2,39 +2,43 @@
id: 587d7fa9367417b2b2512bce
title: Dynamically Set the Coordinates for Each Bar
challengeType: 6
-videoUrl: ''
+forumTopicId: 301487
localeTitle: Динамически устанавливать координаты для каждого бара
---
## Description
- Последняя задача создала и добавила прямоугольник к элементу svg для каждой точки в dataset для представления строки. К сожалению, все они были сложены друг на друга. Размещение прямоугольника обрабатывается атрибутами x и y . Они сообщают D3, где начать рисовать фигуру в области svg . Последний вызов задал каждому из них значение 0, поэтому каждый бар был помещен в верхний левый угол. Для гистограммы все бары должны находиться на одном и том же вертикальном уровне, что означает, что значение y остается неизменным (в 0) для всех баров. Однако значение x должно изменяться при добавлении новых баров. Помните, что большие значения x перемещают элементы дальше вправо. По мере прохождения элементов массива в dataset значение x должно увеличиваться. Метод attr() в D3 принимает функцию обратного вызова, чтобы динамически установить этот атрибут. Функция обратного вызова принимает два аргумента: один для самой точки данных (обычно d ) и один для индекса точки данных в массиве. Второй аргумент для индекса является необязательным. Вот формат:
selection.attr ("свойство", (d, i) => { / * * d - значение точки данных * i - индекс точки данных в массиве * / })
Важно отметить, что вам не нужно писать цикл for или использовать forEach() для перебора элементов в наборе данных. Напомним, что метод data() анализирует набор данных, и любой метод, который привязан после того, как data() запускается один раз для каждого элемента в наборе данных.
+
+Последняя задача создала и добавила прямоугольник к элементу svg для каждой точки в dataset для представления строки. К сожалению, все они были сложены друг на друга. Размещение прямоугольника обрабатывается атрибутами x и y . Они сообщают D3, где начать рисовать фигуру в области svg . Последний вызов задал каждому из них значение 0, поэтому каждый бар был помещен в верхний левый угол. Для гистограммы все бары должны находиться на одном и том же вертикальном уровне, что означает, что значение y остается неизменным (в 0) для всех баров. Однако значение x должно изменяться при добавлении новых баров. Помните, что большие значения x перемещают элементы дальше вправо. По мере прохождения элементов массива в dataset значение x должно увеличиваться. Метод attr() в D3 принимает функцию обратного вызова, чтобы динамически установить этот атрибут. Функция обратного вызова принимает два аргумента: один для самой точки данных (обычно d ) и один для индекса точки данных в массиве. Второй аргумент для индекса является необязательным. Вот формат:
selection.attr ("свойство", (d, i) => { / * * d - значение точки данных * i - индекс точки данных в массиве * / })
Важно отметить, что вам не нужно писать цикл for или использовать forEach() для перебора элементов в наборе данных. Напомним, что метод data() анализирует набор данных, и любой метод, который привязан после того, как data() запускается один раз для каждого элемента в наборе данных.
+
## Instructions
- Измените функцию обратного вызова атрибута x чтобы он возвращал значение индекса 30. Примечание. Каждый бар имеет ширину 25, поэтому увеличение каждого значения x на 30 добавляет некоторое пространство между столбцами. Любое значение, большее 25, будет работать в этом примере.
+
+Измените функцию обратного вызова атрибута x чтобы он возвращал значение индекса 30. Примечание. Каждый бар имеет ширину 25, поэтому увеличение каждого значения x на 30 добавляет некоторое пространство между столбцами. Любое значение, большее 25, будет работать в этом примере.
+
## Tests
```yml
tests:
- - text: Первый rect должен иметь значение x 0.
- testString: 'assert($("rect").eq(0).attr("x") == "0", "The first rect should have an x value of 0.");'
- - text: Второй rect должен иметь значение x 30.
- testString: 'assert($("rect").eq(1).attr("x") == "30", "The second rect should have an x value of 30.");'
- - text: Третий rect должен иметь значение x 60.
- testString: 'assert($("rect").eq(2).attr("x") == "60", "The third rect should have an x value of 60.");'
- - text: Четвертый rect должен иметь значение x 90.
- testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth rect should have an x value of 90.");'
- - text: Пятый rect должен иметь значение x 120.
- testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth rect should have an x value of 120.");'
- - text: Шестой rect должен иметь значение x 150.
- testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth rect should have an x value of 150.");'
- - text: Седьмой rect должен иметь значение x 180.
- testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh rect should have an x value of 180.");'
- - text: Восьмой rect должен иметь значение x 210.
- testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth rect should have an x value of 210.");'
- - text: Девятый rect должен иметь значение x 240.
- testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth rect should have an x value of 240.");'
+ - text: The first rect should have an x value of 0.
+ testString: assert($('rect').eq(0).attr('x') == '0');
+ - text: The second rect should have an x value of 30.
+ testString: assert($('rect').eq(1).attr('x') == '30');
+ - text: The third rect should have an x value of 60.
+ testString: assert($('rect').eq(2).attr('x') == '60');
+ - text: The fourth rect should have an x value of 90.
+ testString: assert($('rect').eq(3).attr('x') == '90');
+ - text: The fifth rect should have an x value of 120.
+ testString: assert($('rect').eq(4).attr('x') == '120');
+ - text: The sixth rect should have an x value of 150.
+ testString: assert($('rect').eq(5).attr('x') == '150');
+ - text: The seventh rect should have an x value of 180.
+ testString: assert($('rect').eq(6).attr('x') == '180');
+ - text: The eighth rect should have an x value of 210.
+ testString: assert($('rect').eq(7).attr('x') == '210');
+ - text: The ninth rect should have an x value of 240.
+ testString: assert($('rect').eq(8).attr('x') == '240');
```
@@ -79,14 +83,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/invert-svg-elements.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/invert-svg-elements.russian.md
index 1ed687c2b5..9c67fa244e 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/invert-svg-elements.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/invert-svg-elements.russian.md
@@ -2,39 +2,43 @@
id: 587d7fa9367417b2b2512bd0
title: Invert SVG Elements
challengeType: 6
-videoUrl: ''
+forumTopicId: 301488
localeTitle: Инвертировать элементы SVG
---
## Description
- Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата x из 0 помещает фигуру на левый край области SVG. Координата y из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения x нажимают прямоугольник вправо. Более высокие значения y выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления y координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата y должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты y из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата y будет равна 99. Координата y которая равна y = heightOfSVG - heightOfBar , поместит бары вправо-вверх.
+
+Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата x из 0 помещает фигуру на левый край области SVG. Координата y из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения x нажимают прямоугольник вправо. Более высокие значения y выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления y координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата y должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты y из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата y будет равна 99. Координата y которая равна y = heightOfSVG - heightOfBar , поместит бары вправо-вверх.
+
## Instructions
- Измените функцию обратного вызова для атрибута y чтобы установить бары вправо-вверх. Помните, что height бара в 3 раза превышает значение d . Заметка В общем случае соотношение y = h - m * d , где m - постоянная, которая масштабирует точки данных.
+
+Измените функцию обратного вызова для атрибута y чтобы установить бары вправо-вверх. Помните, что height бара в 3 раза превышает значение d . Заметка В общем случае соотношение y = h - m * d , где m - постоянная, которая масштабирует точки данных.
+
## Tests
```yml
tests:
- - text: Первый rect должен иметь значение y 64.
- testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first rect should have a y value of 64.");'
- - text: Второй rect должен иметь значение y 7.
- testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second rect should have a y value of 7.");'
- - text: Третий rect должен иметь значение y 34.
- testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third rect should have a y value of 34.");'
- - text: Четвертый rect должен иметь значение y 49.
- testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth rect should have a y value of 49.");'
- - text: Пятый rect должен иметь значение y 25.
- testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth rect should have a y value of 25.");'
- - text: Шестой rect должен иметь значение y 46.
- testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth rect should have a y value of 46.");'
- - text: Седьмой rect должен иметь значение y 13.
- testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh rect should have a y value of 13.");'
- - text: ''
- testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth rect should have a y value of 58.");'
- - text: ''
- testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth rect should have a y value of 73.");'
+ - text: The first rect should have a y value of 64.
+ testString: assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3));
+ - text: The second rect should have a y value of 7.
+ testString: assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3));
+ - text: The third rect should have a y value of 34.
+ testString: assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3));
+ - text: The fourth rect should have a y value of 49.
+ testString: assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3));
+ - text: The fifth rect should have a y value of 25.
+ testString: assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3));
+ - text: The sixth rect should have a y value of 46.
+ testString: assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3));
+ - text: The seventh rect should have a y value of 13.
+ testString: assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3));
+ - text: The eighth rect should have a y value of 58.
+ testString: assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3));
+ - text: The ninth rect should have a y value of 73.
+ testString: assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3));
```
@@ -79,14 +83,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.russian.md
index 97e92aadd9..548f5c5ade 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.russian.md
@@ -2,27 +2,31 @@
id: 587d7fa8367417b2b2512bcb
title: Learn About SVG in D3
challengeType: 6
-videoUrl: ''
+forumTopicId: 301489
localeTitle: Узнайте о SVG в D3
---
## Description
- SVG означает Scalable Vector Graphics . Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны svg теге HTML svg . CSS может быть масштабируемым, когда стили используют относительные единицы (например, vh , vw или проценты), но использование SVG более гибко для создания визуализации данных.
+
+SVG означает Scalable Vector Graphics . Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны svg теге HTML svg . CSS может быть масштабируемым, когда стили используют относительные единицы (например, vh , vw или проценты), но использование SVG более гибко для создания визуализации данных.
+
## Instructions
- Добавьте узел svg в body используя append() . Дайте ему атрибут width установленный для предоставленного w константы, и атрибут height установленный для предоставленной постоянной h используя метод attr() для каждого. Вы увидите его на выходе, потому что в теге style используется background-color розового background-color . Заметка Атрибуты ширины и высоты не имеют единиц. Это строительный блок масштабирования - элемент всегда будет иметь соотношение ширины и высоты 5: 1, независимо от уровня масштабирования.
+
+Добавьте узел svg в body используя append() . Дайте ему атрибут width установленный для предоставленного w константы, и атрибут height установленный для предоставленной постоянной h используя метод attr() для каждого. Вы увидите его на выходе, потому что в теге style используется background-color розового background-color . Заметка Атрибуты ширины и высоты не имеют единиц. Это строительный блок масштабирования - элемент всегда будет иметь соотношение ширины и высоты 5: 1, независимо от уровня масштабирования.
+
## Tests
```yml
tests:
- - text: В вашем документе должен быть 1 элемент svg .
- testString: 'assert($("svg").length == 1, "Your document should have 1 svg element.");'
- - text: Элемент svg должен иметь атрибут width равный 500.
- testString: 'assert($("svg").attr("width") == "500", "The svg element should have a width attribute set to 500.");'
- - text: Элемент svg должен иметь атрибут height равный 100.
- testString: 'assert($("svg").attr("height") == "100", "The svg element should have a height attribute set to 100.");'
+ - text: Your document should have 1 svg element.
+ testString: assert($('svg').length == 1);
+ - text: The svg element should have a width attribute set to 500 or styled to have a width of 500px.
+ testString: assert($('svg').attr('width') == '500'||$('svg').css('width') == '500px');
+ - text: The svg element should have a height attribute set to 100 or styled to have a height of 100px.
+ testString: assert($('svg').attr('height') == '100'||$('svg').css('height') == '100px');
```
@@ -59,14 +63,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.russian.md
index dfe39a84d5..b0e2dee02d 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.russian.md
@@ -2,27 +2,31 @@
id: 587d7fa6367417b2b2512bc3
title: Select a Group of Elements with D3
challengeType: 6
-videoUrl: ''
+forumTopicId: 301490
localeTitle: Выберите группу элементов с D3
---
## Description
- D3 также имеет метод selectAll() для выбора группы элементов. Он возвращает массив узлов HTML для всех элементов документа, соответствующих строке ввода. Ниже приведен пример выбора всех якорных тегов в документе: const anchors = d3.selectAll("a"); Как и метод select() , selectAll() поддерживает цепочку методов, и вы можете использовать ее другими способами.
+
+D3 также имеет метод selectAll() для выбора группы элементов. Он возвращает массив узлов HTML для всех элементов документа, соответствующих строке ввода. Ниже приведен пример выбора всех якорных тегов в документе: const anchors = d3.selectAll("a"); Как и метод select() , selectAll() поддерживает цепочку методов, и вы можете использовать ее другими способами.
+
## Instructions
- Выберите все теги li в документе и измените их текст на «элемент списка», связав метод .text() .
+
+Выберите все теги li в документе и измените их текст на «элемент списка», связав метод .text() .
+
## Tests
```yml
tests:
- - text: 'На странице должно быть 3 элемента li , а текст в каждом должен содержать «элемент списка». Капитализация и интервал должны соответствовать точно.'
- testString: 'assert($("li").text().match(/list item/g).length == 3, "There should be 3 li elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.");'
- - text: Ваш код должен получить доступ к объекту d3 .
- testString: 'assert(code.match(/d3/g), "Your code should access the d3 object.");'
- - text: Ваш код должен использовать метод selectAll .
- testString: 'assert(code.match(/\.selectAll/g), "Your code should use the selectAll method.");'
+ - text: There should be 3 li elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.
+ testString: assert($('li').text().match(/list item/g).length == 3);
+ - text: Your code should access the d3 object.
+ testString: assert(code.match(/d3/g));
+ - text: Your code should use the selectAll method.
+ testString: assert(code.match(/\.selectAll/g));
```
@@ -53,14 +57,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.russian.md
index 152f64b213..32a601a2cb 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.russian.md
@@ -2,31 +2,35 @@
id: 587d7fac367417b2b2512bdb
title: Set a Domain and a Range on a Scale
challengeType: 6
-videoUrl: ''
+forumTopicId: 301491
localeTitle: Установка домена и диапазона по шкале
---
## Description
- По умолчанию шкалы используют отношение идентичности - входное значение сопоставляется с выходным значением. Но масштабы могут быть гораздо более гибкими и интересными. Скажем, набор данных имеет значения от 50 до 480. Это входная информация для шкалы и также известна как домен. Вы хотите сопоставить эти точки вдоль оси x на холсте SVG, между 10 единицами и 500 единицами. Это выходная информация, которая также известна как диапазон. Методы domain() и range() задают эти значения для шкалы. Оба метода принимают в качестве аргумента массив из по меньшей мере двух элементов. Вот пример:
// Установить домен // Область охватывает набор входных значений scale.domain ([50, 480]); // Установить диапазон // Диапазон охватывает набор выходных значений scale.range ([10, 500]); масштаб (50) // Возвращает 10 масштаб (480) // Возвращает 500 масштаб (325) // Возвращает 323.37 масштаб (750) // Возвращает 807.67 d3.scaleLinear ()
Обратите внимание, что шкала использует линейную зависимость между областью и значениями диапазона, чтобы выяснить, какой результат должен быть для данного номера. Минимальное значение в области (50) соответствует минимальному значению (10) в диапазоне.
+
+По умолчанию шкалы используют отношение идентичности - входное значение сопоставляется с выходным значением. Но масштабы могут быть гораздо более гибкими и интересными. Скажем, набор данных имеет значения от 50 до 480. Это входная информация для шкалы и также известна как домен. Вы хотите сопоставить эти точки вдоль оси x на холсте SVG, между 10 единицами и 500 единицами. Это выходная информация, которая также известна как диапазон. Методы domain() и range() задают эти значения для шкалы. Оба метода принимают в качестве аргумента массив из по меньшей мере двух элементов. Вот пример:
// Установить домен // Область охватывает набор входных значений scale.domain ([50, 480]); // Установить диапазон // Диапазон охватывает набор выходных значений scale.range ([10, 500]); масштаб (50) // Возвращает 10 масштаб (480) // Возвращает 500 масштаб (325) // Возвращает 323.37 масштаб (750) // Возвращает 807.67 d3.scaleLinear ()
Обратите внимание, что шкала использует линейную зависимость между областью и значениями диапазона, чтобы выяснить, какой результат должен быть для данного номера. Минимальное значение в области (50) соответствует минимальному значению (10) в диапазоне.
+
## Instructions
- Создайте масштаб и установите его домен в [250, 500] и диапазон до [10, 150] . Заметка Вы можете связать методы domain() и range() с переменной scale .
+
+Создайте масштаб и установите его домен в [250, 500] и диапазон до [10, 150] . Заметка Вы можете связать методы domain() и range() с переменной scale .
+
## Tests
```yml
tests:
- - text: Ваш код должен использовать метод domain() .
- testString: 'assert(code.match(/\.domain/g), "Your code should use the domain() method.");'
- - text: 'domain() шкалы должен быть установлен в [250, 500] .'
- testString: 'assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), "The domain() of the scale should be set to [250, 500].");'
- - text: Ваш код должен использовать метод range() .
- testString: 'assert(code.match(/\.range/g), "Your code should use the range() method.");'
- - text: 'range() шкалы должен быть установлен на [10, 150] .'
- testString: 'assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), "The range() of the scale should be set to [10, 150].");'
- - text: Текст в h2 должен быть -102.
- testString: 'assert($("h2").text() == "-102", "The text in the h2 should be -102.");'
+ - text: Your code should use the domain() method.
+ testString: assert(code.match(/\.domain/g));
+ - text: The domain() of the scale should be set to [250, 500].
+ testString: assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
+ - text: Your code should use the range() method.
+ testString: assert(code.match(/\.range/g));
+ - text: The range() of the scale should be set to [10, 150].
+ testString: assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
+ - text: The text in the h2 should be -102.
+ testString: assert($('h2').text() == '-102');
```
@@ -57,14 +61,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/style-d3-labels.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/style-d3-labels.russian.md
index 4f9450551c..bcc6fb9557 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/style-d3-labels.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/style-d3-labels.russian.md
@@ -2,25 +2,29 @@
id: 587d7faa367417b2b2512bd3
title: Style D3 Labels
challengeType: 6
-videoUrl: ''
+forumTopicId: 301492
localeTitle: Стильные этикетки D3
---
## Description
- Методы D3 могут добавлять стили к ярлыкам бара. Атрибут fill устанавливает цвет текста для text узла. Метод style() устанавливает правила CSS для других стилей, таких как «font-family» или «font-size».
+
+Методы D3 могут добавлять стили к ярлыкам бара. Атрибут fill устанавливает цвет текста для text узла. Метод style() устанавливает правила CSS для других стилей, таких как «font-family» или «font-size».
+
## Instructions
- Установите font-size для text элементов на 25 пикселей, а цвет текста - красный.
+
+Установите font-size для text элементов на 25 пикселей, а цвет текста - красный.
+
## Tests
```yml
tests:
- - text: На этикетках должен быть красный цвет fill .
- testString: 'assert($("text").css("fill") == "rgb(255, 0, 0)", "The labels should all have a fill color of red.");'
- - text: Все метки должны иметь font-size 25 пикселей.
- testString: 'assert($("text").css("font-size") == "25px", "The labels should all have a font-size of 25 pixels.");'
+ - text: The labels should all have a fill color of red.
+ testString: assert($('text').css('fill') == 'rgb(255, 0, 0)');
+ - text: The labels should all have a font-size of 25 pixels.
+ testString: assert($('text').css('font-size') == '25px');
```
@@ -73,14 +77,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.russian.md
index d8374476fd..501eeceb2d 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.russian.md
@@ -2,39 +2,43 @@
id: 587d7fa8367417b2b2512bc9
title: Update the Height of an Element Dynamically
challengeType: 6
-videoUrl: ''
+forumTopicId: 301493
localeTitle: Обновление высоты элемента динамически
---
## Description
- Предыдущие проблемы касались того, как отображать данные из массива и как добавлять классы CSS. Вы можете объединить эти уроки, чтобы создать простую гистограмму. Для этого есть два шага: 1) Создайте div для каждой точки данных в массиве. 2) Дайте каждому div динамическую высоту, используя функцию обратного вызова в методе style() которая устанавливает высоту, равную значению данных. Назовите формат задайте стиль с помощью функции обратного вызова: selection.style("cssProperty", (d) => d)
+
+Предыдущие проблемы касались того, как отображать данные из массива и как добавлять классы CSS. Вы можете объединить эти уроки, чтобы создать простую гистограмму. Для этого есть два шага: 1) Создайте div для каждой точки данных в массиве. 2) Дайте каждому div динамическую высоту, используя функцию обратного вызова в методе style() которая устанавливает высоту, равную значению данных. Назовите формат задайте стиль с помощью функции обратного вызова: selection.style("cssProperty", (d) => d)
+
## Instructions
- Добавьте метод style() в код в редакторе, чтобы установить свойство height для каждого элемента. Используйте функцию обратного вызова, чтобы вернуть значение точки данных с добавленной к ней строкой «px».
+
+Добавьте метод style() в код в редакторе, чтобы установить свойство height для каждого элемента. Используйте функцию обратного вызова, чтобы вернуть значение точки данных с добавленной к ней строкой «px».
+
## Tests
```yml
tests:
- - text: Первый div должен иметь height 12 пикселей.
- testString: 'assert($("div").eq(0).css("height") == "12px", "The first div should have a height of 12 pixels.");'
- - text: Второй div должен иметь height 31 пиксель.
- testString: 'assert($("div").eq(1).css("height") == "31px", "The second div should have a height of 31 pixels.");'
- - text: Третий div должен иметь height 22 пикселя.
- testString: 'assert($("div").eq(2).css("height") == "22px", "The third div should have a height of 22 pixels.");'
- - text: Четвертый div должен иметь height 17 пикселей.
- testString: 'assert($("div").eq(3).css("height") == "17px", "The fourth div should have a height of 17 pixels.");'
- - text: Пятый div должен иметь height 25 пикселей.
- testString: 'assert($("div").eq(4).css("height") == "25px", "The fifth div should have a height of 25 pixels.");'
- - text: Шестой div должен иметь height 18 пикселей.
- testString: 'assert($("div").eq(5).css("height") == "18px", "The sixth div should have a height of 18 pixels.");'
- - text: Седьмой div должен иметь height 29 пикселей.
- testString: 'assert($("div").eq(6).css("height") == "29px", "The seventh div should have a height of 29 pixels.");'
- - text: Восьмой div должен иметь height 14 пикселей.
- testString: 'assert($("div").eq(7).css("height") == "14px", "The eighth div should have a height of 14 pixels.");'
- - text: Девятый div должен иметь height 9 пикселей.
- testString: 'assert($("div").eq(8).css("height") == "9px", "The ninth div should have a height of 9 pixels.");'
+ - text: The first div should have a height of 12 pixels.
+ testString: assert($('div').eq(0).css('height') == '12px');
+ - text: The second div should have a height of 31 pixels.
+ testString: assert($('div').eq(1).css('height') == '31px');
+ - text: The third div should have a height of 22 pixels.
+ testString: assert($('div').eq(2).css('height') == '22px');
+ - text: The fourth div should have a height of 17 pixels.
+ testString: assert($('div').eq(3).css('height') == '17px');
+ - text: The fifth div should have a height of 25 pixels.
+ testString: assert($('div').eq(4).css('height') == '25px');
+ - text: The sixth div should have a height of 18 pixels.
+ testString: assert($('div').eq(5).css('height') == '18px');
+ - text: The seventh div should have a height of 29 pixels.
+ testString: assert($('div').eq(6).css('height') == '29px');
+ - text: The eighth div should have a height of 14 pixels.
+ testString: assert($('div').eq(7).css('height') == '14px');
+ - text: The ninth div should have a height of 9 pixels.
+ testString: assert($('div').eq(8).css('height') == '9px');
```
@@ -75,14 +79,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.russian.md
index b68152d4b7..4395e1ea64 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.russian.md
@@ -2,65 +2,69 @@
id: 587d7fac367417b2b2512bde
title: Use a Pre-Defined Scale to Place Elements
challengeType: 6
-videoUrl: ''
+forumTopicId: 301494
localeTitle: Используйте предварительно заданную шкалу для размещения элементов
---
## Description
- С установленными весами пришло время снова отобразить график рассеяния. Масштабы похожи на функции обработки, которые превращают исходные данные x и y в значения, которые соответствуют и визуализируются правильно на холсте SVG. Они хранят данные в области построения экрана. Вы устанавливаете значения атрибута координат для формы SVG с помощью функции масштабирования. Сюда входят атрибуты x и y для rect или text элементов, или cx и cy для circles . Вот пример:
форма .attr ("x", (d) => xScale (d [0]))
Масштабы устанавливают атрибуты координат формы, чтобы поместить точки данных на холст SVG. Вам не нужно применять шкалы, когда вы показываете фактическое значение данных, например, в методе text() для всплывающей подсказки или метки.
+
+С установленными весами пришло время снова отобразить график рассеяния. Масштабы похожи на функции обработки, которые превращают исходные данные x и y в значения, которые соответствуют и визуализируются правильно на холсте SVG. Они хранят данные в области построения экрана. Вы устанавливаете значения атрибута координат для формы SVG с помощью функции масштабирования. Сюда входят атрибуты x и y для rect или text элементов, или cx и cy для circles . Вот пример:
форма .attr ("x", (d) => xScale (d [0]))
Масштабы устанавливают атрибуты координат формы, чтобы поместить точки данных на холст SVG. Вам не нужно применять шкалы, когда вы показываете фактическое значение данных, например, в методе text() для всплывающей подсказки или метки.
+
## Instructions
- Используйте xScale и yScale чтобы yScalecircle и text фигуры на холст SVG. Для circles применяйте шкалы для установки атрибутов cx и cy . Дайте им радиус 5 единиц. Для text элементов примените шкалы для установки атрибутов x и y . Этикетки должны быть смещены справа от точек. Для этого добавьте 10 единиц к значению данных x, прежде чем передавать его в xScale .
+
+Используйте xScale и yScale чтобы yScalecircle и text фигуры на холст SVG. Для circles применяйте шкалы для установки атрибутов cx и cy . Дайте им радиус 5 единиц. Для text элементов примените шкалы для установки атрибутов x и y . Этикетки должны быть смещены справа от точек. Для этого добавьте 10 единиц к значению данных x, прежде чем передавать его в xScale .
+
## Tests
```yml
tests:
- - text: Ваш код должен содержать 10 элементов circle .
- testString: 'assert($("circle").length == 10, "Your code should have 10 circle elements.");'
- - text: Первый элемент circle должен иметь значение cx приблизительно 91 и значение cy приблизительно 368 после применения шкал. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(0).attr("cx")) == "91" && Math.round($("circle").eq(0).attr("cy")) == "368" && $("circle").eq(0).attr("r") == "5", "The first circle element should have a cx value of approximately 91 and a cy value of approximately 368 after applying the scales. It should also have an r value of 5.");'
- - text: Второй элемент circle должен иметь значение cx приблизительно 159 и значение cy приблизительно 181 после применения шкал. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(1).attr("cx")) == "159" && Math.round($("circle").eq(1).attr("cy")) == "181" && $("circle").eq(1).attr("r") == "5", "The second circle element should have a cx value of approximately 159 and a cy value of approximately 181 after applying the scales. It should also have an r value of 5.");'
- - text: Элемент третьего circle должен иметь значение cx приблизительно 340 и значение cy приблизительно 329 после применения весов. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(2).attr("cx")) == "340" && Math.round($("circle").eq(2).attr("cy")) == "329" && $("circle").eq(2).attr("r") == "5", "The third circle element should have a cx value of approximately 340 and a cy value of approximately 329 after applying the scales. It should also have an r value of 5.");'
- - text: Элемент четвертого circle должен иметь значение cx приблизительно 131 и значение cy приблизительно 60 после применения весов. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(3).attr("cx")) == "131" && Math.round($("circle").eq(3).attr("cy")) == "60" && $("circle").eq(3).attr("r") == "5", "The fourth circle element should have a cx value of approximately 131 and a cy value of approximately 60 after applying the scales. It should also have an r value of 5.");'
- - text: Элемент пятого circle должен иметь значение cx приблизительно 440 и значение cy приблизительно 237 после применения весов. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(4).attr("cx")) == "440" && Math.round($("circle").eq(4).attr("cy")) == "237" && $("circle").eq(4).attr("r") == "5", "The fifth circle element should have a cx value of approximately 440 and a cy value of approximately 237 after applying the scales. It should also have an r value of 5.");'
- - text: Элемент шестого circle должен иметь значение cx приблизительно 271 и значение cy приблизительно 306 после применения шкал. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(5).attr("cx")) == "271" && Math.round($("circle").eq(5).attr("cy")) == "306" && $("circle").eq(5).attr("r") == "5", "The sixth circle element should have a cx value of approximately 271 and a cy value of approximately 306 after applying the scales. It should also have an r value of 5.");'
- - text: Элемент седьмого circle должен иметь значение cx приблизительно 361 и значение cy приблизительно 351 после применения весов. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(6).attr("cx")) == "361" && Math.round($("circle").eq(6).attr("cy")) == "351" && $("circle").eq(6).attr("r") == "5", "The seventh circle element should have a cx value of approximately 361 and a cy value of approximately 351 after applying the scales. It should also have an r value of 5.");'
- - text: Элемент восьмого circle должен иметь значение cx приблизительно 261 и значение cy приблизительно 132 после применения шкал. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(7).attr("cx")) == "261" && Math.round($("circle").eq(7).attr("cy")) == "132" && $("circle").eq(7).attr("r") == "5", "The eighth circle element should have a cx value of approximately 261 and a cy value of approximately 132 after applying the scales. It should also have an r value of 5.");'
- - text: Элемент девятого circle должен иметь значение cx приблизительно 131 и значение cy приблизительно 144 после применения шкал. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(8).attr("cx")) == "131" && Math.round($("circle").eq(8).attr("cy")) == "144" && $("circle").eq(8).attr("r") == "5", "The ninth circle element should have a cx value of approximately 131 and a cy value of approximately 144 after applying the scales. It should also have an r value of 5.");'
- - text: Элемент десятого circle должен иметь значение cx приблизительно 79 и значение cy приблизительно 326 после применения весов. Он также должен иметь значение r 5.
- testString: 'assert(Math.round($("circle").eq(9).attr("cx")) == "79" && Math.round($("circle").eq(9).attr("cy")) == "326" && $("circle").eq(9).attr("r") == "5", "The tenth circle element should have a cx value of approximately 79 and a cy value of approximately 326 after applying the scales. It should also have an r value of 5.");'
- - text: Ваш код должен содержать 10 text элементов.
- testString: 'assert($("text").length == 10, "Your code should have 10 text elements.");'
- - text: Первая метка должна иметь значение x приблизительно 100 и значение y приблизительно 368 после применения весов.
- testString: 'assert(Math.round($("text").eq(0).attr("x")) == "100" && Math.round($("text").eq(0).attr("y")) == "368", "The first label should have an x value of approximately 100 and a y value of approximately 368 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(1).attr("x")) == "168" && Math.round($("text").eq(1).attr("y")) == "181", "The second label should have an x value of approximately 168 and a y value of approximately 181 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(2).attr("x")) == "350" && Math.round($("text").eq(2).attr("y")) == "329", "The third label should have an x value of approximately 350 and a y value of approximately 329 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(3).attr("x")) == "141" && Math.round($("text").eq(3).attr("y")) == "60", "The fourth label should have an x value of approximately 141 and a y value of approximately 60 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(4).attr("x")) == "449" && Math.round($("text").eq(4).attr("y")) == "237", "The fifth label should have an x value of approximately 449 and a y value of approximately 237 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(5).attr("x")) == "280" && Math.round($("text").eq(5).attr("y")) == "306", "The sixth label should have an x value of approximately 280 and a y value of approximately 306 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(6).attr("x")) == "370" && Math.round($("text").eq(6).attr("y")) == "351", "The seventh label should have an x value of approximately 370 and a y value of approximately 351 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(7).attr("x")) == "270" && Math.round($("text").eq(7).attr("y")) == "132", "The eighth label should have an x value of approximately 270 and a y value of approximately 132 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(8).attr("x")) == "140" && Math.round($("text").eq(8).attr("y")) == "144", "The ninth label should have an x value of approximately 140 and a y value of approximately 144 after applying the scales.");'
- - text: ''
- testString: 'assert(Math.round($("text").eq(9).attr("x")) == "88" && Math.round($("text").eq(9).attr("y")) == "326", "The tenth label should have an x value of approximately 88 and a y value of approximately 326 after applying the scales.");'
+ - text: Your code should have 10 circle elements.
+ testString: assert($('circle').length == 10);
+ - text: The first circle element should have a cx value of approximately 91 and a cy value of approximately 368 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(0).attr('cx')) == '91' && Math.round($('circle').eq(0).attr('cy')) == '368' && $('circle').eq(0).attr('r') == '5');
+ - text: The second circle element should have a cx value of approximately 159 and a cy value of approximately 181 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(1).attr('cx')) == '159' && Math.round($('circle').eq(1).attr('cy')) == '181' && $('circle').eq(1).attr('r') == '5');
+ - text: The third circle element should have a cx value of approximately 340 and a cy value of approximately 329 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(2).attr('cx')) == '340' && Math.round($('circle').eq(2).attr('cy')) == '329' && $('circle').eq(2).attr('r') == '5');
+ - text: The fourth circle element should have a cx value of approximately 131 and a cy value of approximately 60 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(3).attr('cx')) == '131' && Math.round($('circle').eq(3).attr('cy')) == '60' && $('circle').eq(3).attr('r') == '5');
+ - text: The fifth circle element should have a cx value of approximately 440 and a cy value of approximately 237 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(4).attr('cx')) == '440' && Math.round($('circle').eq(4).attr('cy')) == '237' && $('circle').eq(4).attr('r') == '5');
+ - text: The sixth circle element should have a cx value of approximately 271 and a cy value of approximately 306 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(5).attr('cx')) == '271' && Math.round($('circle').eq(5).attr('cy')) == '306' && $('circle').eq(5).attr('r') == '5');
+ - text: The seventh circle element should have a cx value of approximately 361 and a cy value of approximately 351 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(6).attr('cx')) == '361' && Math.round($('circle').eq(6).attr('cy')) == '351' && $('circle').eq(6).attr('r') == '5');
+ - text: The eighth circle element should have a cx value of approximately 261 and a cy value of approximately 132 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(7).attr('cx')) == '261' && Math.round($('circle').eq(7).attr('cy')) == '132' && $('circle').eq(7).attr('r') == '5');
+ - text: The ninth circle element should have a cx value of approximately 131 and a cy value of approximately 144 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(8).attr('cx')) == '131' && Math.round($('circle').eq(8).attr('cy')) == '144' && $('circle').eq(8).attr('r') == '5');
+ - text: The tenth circle element should have a cx value of approximately 79 and a cy value of approximately 326 after applying the scales. It should also have an r value of 5.
+ testString: assert(Math.round($('circle').eq(9).attr('cx')) == '79' && Math.round($('circle').eq(9).attr('cy')) == '326' && $('circle').eq(9).attr('r') == '5');
+ - text: Your code should have 10 text elements.
+ testString: assert($('text').length == 10);
+ - text: The first label should have an x value of approximately 100 and a y value of approximately 368 after applying the scales.
+ testString: assert(Math.round($('text').eq(0).attr('x')) == '100' && Math.round($('text').eq(0).attr('y')) == '368');
+ - text: The second label should have an x value of approximately 168 and a y value of approximately 181 after applying the scales.
+ testString: assert(Math.round($('text').eq(1).attr('x')) == '168' && Math.round($('text').eq(1).attr('y')) == '181');
+ - text: The third label should have an x value of approximately 350 and a y value of approximately 329 after applying the scales.
+ testString: assert(Math.round($('text').eq(2).attr('x')) == '350' && Math.round($('text').eq(2).attr('y')) == '329');
+ - text: The fourth label should have an x value of approximately 141 and a y value of approximately 60 after applying the scales.
+ testString: assert(Math.round($('text').eq(3).attr('x')) == '141' && Math.round($('text').eq(3).attr('y')) == '60');
+ - text: The fifth label should have an x value of approximately 449 and a y value of approximately 237 after applying the scales.
+ testString: assert(Math.round($('text').eq(4).attr('x')) == '449' && Math.round($('text').eq(4).attr('y')) == '237');
+ - text: The sixth label should have an x value of approximately 280 and a y value of approximately 306 after applying the scales.
+ testString: assert(Math.round($('text').eq(5).attr('x')) == '280' && Math.round($('text').eq(5).attr('y')) == '306');
+ - text: The seventh label should have an x value of approximately 370 and a y value of approximately 351 after applying the scales.
+ testString: assert(Math.round($('text').eq(6).attr('x')) == '370' && Math.round($('text').eq(6).attr('y')) == '351');
+ - text: The eighth label should have an x value of approximately 270 and a y value of approximately 132 after applying the scales.
+ testString: assert(Math.round($('text').eq(7).attr('x')) == '270' && Math.round($('text').eq(7).attr('y')) == '132');
+ - text: The ninth label should have an x value of approximately 140 and a y value of approximately 144 after applying the scales.
+ testString: assert(Math.round($('text').eq(8).attr('x')) == '140' && Math.round($('text').eq(8).attr('y')) == '144');
+ - text: The tenth label should have an x value of approximately 88 and a y value of approximately 326 after applying the scales.
+ testString: assert(Math.round($('text').eq(9).attr('x')) == '88' && Math.round($('text').eq(9).attr('y')) == '326');
```
@@ -132,14 +136,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.russian.md
index a49fd3d8f8..35afbba4ec 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.russian.md
@@ -2,27 +2,31 @@
id: 587d7fac367417b2b2512bdd
title: Use Dynamic Scales
challengeType: 6
-videoUrl: ''
+forumTopicId: 301495
localeTitle: Использование динамических весов
---
## Description
- Методы D3 min() и max() полезны, чтобы помочь установить масштаб. Учитывая сложный набор данных, одним из приоритетов является установка масштаба, чтобы визуализация соответствовала ширине и высоте контейнера SVG. Вы хотите, чтобы все данные отображались внутри холста SVG, чтобы они были видны на веб-странице. В приведенном ниже примере задана шкала по оси X для данных графика разброса. Метод domain() передает информацию в шкалу о значениях необработанных данных для графика. Метод range() дает ему информацию о фактическом пространстве на веб-странице для визуализации. В этом примере домен переходит от 0 к максимуму в наборе. Он использует метод max() с функцией обратного вызова, основанной на значениях x в массивах. Диапазон использует ширину холста SVG ( w ), но также включает в себя некоторые дополнения. Это помещает пространство между точками графика рассеяния и краем холста SVG.
// Заполнение между границей холста SVG и графиком const padding = 30; const xScale = d3.scaleLinear () .domain ([0, d3.max (набор данных, (d) => d [0])]) .range ([padding, w - padding]);
Сначала заполнение может сбивать с толку. Отобразите ось x как горизонтальную линию от 0 до 500 (значение ширины для холста SVG). Включение дополнения в метод range() заставляет график начинаться с 30 по этой линии (вместо 0) и заканчиваться на 470 (вместо 500).
+
+Методы D3 min() и max() полезны, чтобы помочь установить масштаб. Учитывая сложный набор данных, одним из приоритетов является установка масштаба, чтобы визуализация соответствовала ширине и высоте контейнера SVG. Вы хотите, чтобы все данные отображались внутри холста SVG, чтобы они были видны на веб-странице. В приведенном ниже примере задана шкала по оси X для данных графика разброса. Метод domain() передает информацию в шкалу о значениях необработанных данных для графика. Метод range() дает ему информацию о фактическом пространстве на веб-странице для визуализации. В этом примере домен переходит от 0 к максимуму в наборе. Он использует метод max() с функцией обратного вызова, основанной на значениях x в массивах. Диапазон использует ширину холста SVG ( w ), но также включает в себя некоторые дополнения. Это помещает пространство между точками графика рассеяния и краем холста SVG.
// Заполнение между границей холста SVG и графиком const padding = 30; const xScale = d3.scaleLinear () .domain ([0, d3.max (набор данных, (d) => d [0])]) .range ([padding, w - padding]);
Сначала заполнение может сбивать с толку. Отобразите ось x как горизонтальную линию от 0 до 500 (значение ширины для холста SVG). Включение дополнения в метод range() заставляет график начинаться с 30 по этой линии (вместо 0) и заканчиваться на 470 (вместо 500).
+
## Instructions
- Используйте переменную yScale для создания линейной шкалы оси y. Домен должен начинаться с нуля и перейти к максимальному значению y в наборе. Диапазон должен использовать высоту SVG ( h ) и включать прокладку. Заметка Не забудьте сохранить сюжет правой стороны. Когда вы устанавливаете диапазон для координат y, более высокое значение (высота минус заполнение) является первым аргументом, а нижним значением является второй аргумент.
+
+Используйте переменную yScale для создания линейной шкалы оси y. Домен должен начинаться с нуля и перейти к максимальному значению y в наборе. Диапазон должен использовать высоту SVG ( h ) и включать прокладку. Заметка Не забудьте сохранить сюжет правой стороны. Когда вы устанавливаете диапазон для координат y, более высокое значение (высота минус заполнение) является первым аргументом, а нижним значением является второй аргумент.
+
## Tests
```yml
tests:
- - text: Текст в h2 должен быть 30.
- testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the h2 should be 30.");'
- - text: 'domain() yScale должен быть эквивалентен [0, 411] .'
- testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The domain() of yScale should be equivalent to [0, 411].");'
- - text: ''
- testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The range() of yScale should be equivalent to [470, 30].");'
+ - text: The text in the h2 should be 30.
+ testString: assert(output == 30 && $('h2').text() == '30');
+ - text: The domain() of yScale should be equivalent to [0, 411].
+ testString: assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
+ - text: The range() of yScale should be equivalent to [470, 30].
+ testString: assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
```
@@ -79,14 +83,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.russian.md b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.russian.md
index 6a5b100bcc..9d15c40c46 100644
--- a/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.russian.md
@@ -2,25 +2,29 @@
id: 587d7fac367417b2b2512bdc
title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
challengeType: 6
-videoUrl: ''
+forumTopicId: 301496
localeTitle: Используйте функции d3.max и d3.min для поиска минимальных и максимальных значений в наборе данных
---
## Description
- D3 method domain() и range() устанавливают эту информацию для вашего масштаба на основе данных. Есть несколько способов сделать это проще. Часто, когда вы устанавливаете домен, вы хотите использовать минимальное и максимальное значения в наборе данных. Попытка найти эти значения вручную, особенно в большом наборе данных, может привести к ошибкам. D3 имеет два метода - min() и max() чтобы вернуть эту информацию. Вот пример:
Набор данных может иметь вложенные массивы, такие как пары координат [x, y], которые были в примере графика рассеяния. В этом случае вам нужно рассказать D3, как рассчитать максимум и минимум. К счастью, методы min() и max() принимают функцию обратного вызова. В этом примере аргумент функции обратного вызова d для текущего внутреннего массива. Обратный вызов должен возвращать элемент из внутреннего массива (значение x или y), по которому вы хотите вычислить максимальное или минимальное значение. Ниже приведен пример того, как найти значения min и max с массивом массивов:
const locationData = [[1, 7], [6, 3], [8, 3]]; // Возвращает наименьшее число из первых элементов const minX = d3.min (locationData, (d) => d [0]); // minX сравнивается с 1, 6 и 8 и устанавливается в 1
+
+D3 method domain() и range() устанавливают эту информацию для вашего масштаба на основе данных. Есть несколько способов сделать это проще. Часто, когда вы устанавливаете домен, вы хотите использовать минимальное и максимальное значения в наборе данных. Попытка найти эти значения вручную, особенно в большом наборе данных, может привести к ошибкам. D3 имеет два метода - min() и max() чтобы вернуть эту информацию. Вот пример:
Набор данных может иметь вложенные массивы, такие как пары координат [x, y], которые были в примере графика рассеяния. В этом случае вам нужно рассказать D3, как рассчитать максимум и минимум. К счастью, методы min() и max() принимают функцию обратного вызова. В этом примере аргумент функции обратного вызова d для текущего внутреннего массива. Обратный вызов должен возвращать элемент из внутреннего массива (значение x или y), по которому вы хотите вычислить максимальное или минимальное значение. Ниже приведен пример того, как найти значения min и max с массивом массивов:
const locationData = [[1, 7], [6, 3], [8, 3]]; // Возвращает наименьшее число из первых элементов const minX = d3.min (locationData, (d) => d [0]); // minX сравнивается с 1, 6 и 8 и устанавливается в 1
+
## Instructions
- Переменная positionData содержит трехмерный (3D) массив. Используйте метод D3, чтобы найти максимальное значение координаты z (третье значение) из массивов и сохранить его в output переменной. Заметка Интересный факт - D3 может отображать 3D-массивы.
+
+Переменная positionData содержит трехмерный (3D) массив. Используйте метод D3, чтобы найти максимальное значение координаты z (третье значение) из массивов и сохранить его в output переменной. Заметка Интересный факт - D3 может отображать 3D-массивы.
+
## Tests
```yml
tests:
- - text: Текст в h2 должен быть 8.
- testString: 'assert(output == 8 && $("h2").text() == "8", "The text in the h2 should be 8.");'
- - text: Ваш код должен использовать метод max() .
- testString: 'assert(code.match(/\.max/g), "Your code should use the max() method.")'
+ - text: The text in the h2 should be 8.
+ testString: assert(output == 8 && $('h2').text() == '8');
+ - text: Your code should use the max() method.
+ testString: assert(code.match(/\.max/g), 'Your code should use the max() method.')
```
@@ -34,7 +38,7 @@ tests:
```html
+
+
Cat Photo Finder
+
+ The message will go here
+
+
+
+
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.russian.md b/curriculum/challenges/russian/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.russian.md
index e9afb4bb24..1b3e683c1a 100644
--- a/curriculum/challenges/russian/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.russian.md
@@ -2,25 +2,42 @@
id: 587d7fad367417b2b2512be1
title: Handle Click Events with JavaScript using the onclick property
challengeType: 6
-videoUrl: ''
-localeTitle: 'Ручка Нажмите «События» с помощью JavaScript, используя свойство onclick'
+forumTopicId: 301503
+localeTitle: Ручка Нажмите «События» с помощью JavaScript, используя свойство onclick
---
## Description
-undefined
+
+You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called DOMContentLoaded. Here's the code that does this:
+
+```js
+document.addEventListener('DOMContentLoaded',function() {
+
+});
+```
+
+You can implement event handlers that go inside of the DOMContentLoaded function. You can implement an onclick event handler which triggers when the user clicks on the element with id getMessage, by adding the following code:
+
+```js
+document.getElementById('getMessage').onclick=function(){};
+```
+
+
## Instructions
-undefined
+
+Add a click event handler inside of the DOMContentLoaded function for the element with id of getMessage.
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert(code.match(/document\.getElementById\(\s*?("|")getMessage\1\s*?\)/g), "Your code should use the document.getElementById method to select the getMessage element.");'
- - text: ''
- testString: 'assert(typeof document.getElementById("getMessage").onclick === "function", "Your code should add an onclick event handler.");'
+ - text: Your code should use the document.getElementById method to select the getMessage element.
+ testString: assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
+ - text: Your code should add an onclick event handler.
+ testString: assert(typeof document.getElementById('getMessage').onclick === 'function');
```
@@ -80,14 +97,13 @@ tests:
-
-
## Solution
-```js
+```html
// solution required
```
+
diff --git a/curriculum/challenges/russian/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.russian.md b/curriculum/challenges/russian/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.russian.md
index 956c18ce4e..08f88401f5 100644
--- a/curriculum/challenges/russian/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.russian.md
+++ b/curriculum/challenges/russian/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.russian.md
@@ -2,33 +2,57 @@
id: 587d7faf367417b2b2512be9
title: Post Data with the JavaScript XMLHttpRequest Method
challengeType: 6
-videoUrl: ''
+forumTopicId: 301504
localeTitle: Опубликовать данные с помощью метода XMLHttpRequest JavaScript
---
## Description
-undefined
+
+In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.
+JavaScript's XMLHttpRequest method is also used to post data to a server. Here's an example:
+
+```js
+const xhr = new XMLHttpRequest();
+xhr.open('POST', url, true);
+xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4 && xhr.status === 201){
+ const serverResponse = JSON.parse(xhr.response);
+ document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
+ }
+};
+const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
+xhr.send(body);
+```
+
+You've seen several of these methods before. Here the open method initializes the request as a "POST" to the given URL of the external resource, and uses the true Boolean to make it asynchronous.
+The setRequestHeader method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the open method, but before the send method. The two parameters are the name of the header and the value to set as the body of that header.
+Next, the onreadystatechange event listener handles a change in the state of the request. A readyState of 4 means the operation is complete, and a status of 201 means it was a successful request. The document's HTML can be updated.
+Finally, the send method sends the request with the body value, which the userName key was given by the user in the input field.
+
## Instructions
-undefined
+
+Update the code to create and send a "POST" request. Then enter your name in input box and click "Send Message". Your AJAX function will replace "Reply from Server will be here." with the reply of the server. In this case, it is your name appended with " loves cats".
+
## Tests
```yml
tests:
- - text: ''
- testString: 'assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), "Your code should create a new XMLHttpRequest.");'
- - text: ''
- testString: 'assert(code.match(/\.open\(\s*?("|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g), "Your code should use the open method to initialize a "POST" request to the server.");'
- - text: ''
- testString: 'assert(code.match(/\.setRequestHeader\(\s*?("|")Content-Type\1\s*?,\s*?("|")text\/plain\2\s*?\)/g), "Your code should use the setRequestHeader method.");'
- - text: В вашем коде должен быть onreadystatechange события onreadystatechange установленный на функцию.
- testString: 'assert(code.match(/\.onreadystatechange\s*?=/g), "Your code should have an onreadystatechange event handler set to a function.");'
- - text: ''
- testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?.+?\.responseText/g), "Your code should get the element with class message and change its inner HTML to the responseText.");'
- - text: ''
- testString: 'assert(code.match(/\.send\(\s*?userName\s*?\)/g), "Your code should use the send method.");'
+ - text: Your code should create a new XMLHttpRequest.
+ testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
+ - text: Your code should use the open method to initialize a "POST" request to the server.
+ testString: assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
+ - text: Your code should use the setRequestHeader method.
+ testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g));
+ - text: Your code should have an onreadystatechange event handler set to a function.
+ testString: assert(code.match(/\.onreadystatechange\s*?=/g));
+ - text: Your code should get the element with class message and change its textContent to "userName loves cats"
+ testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g));
+ - text: Your code should use the send method.
+ testString: assert(code.match(/\.send\(\s*?body\s*?\)/g));
```
@@ -41,10 +65,11 @@ tests:
```html
```
+
+