# Тестовое задание для фронтенда
## СКАУТ
<details>
<summary> Общий комментарий для принимающего </summary>
<ul>
<li> Всего за тест кандидат может набрать 11 баллов</li>
<li> Проходной на собеседование - 9: т.е разрешаются две помарки в первых задачах или не решение последней </li>
<li>Вес каждого пункта ответа указан в скобках</li>
<li> Кандидату документ не пересылается, показывается по-возможности "с рук" во избежание копипаста</li>
<li> Важно следить, чтобы кандидат не пытался печатать на третьем задании</li>
</ul>
</details>
### Задача 1. CSS (5 баллов, 7 минут максимум)
#### Какого цвета будет какая часть текста
```html
<style>
ol li.two {
color: yellow;
}
ol > .two {
color: purple;
}
ol {
color: blue;
}
ol > li {
color: red;
}
main > ol {
color: brown;
}
li::marker {
color: green;
}
li::before {
color: grey;
}
#four {
color: orange;
}
.four {
color: cyan;
}
</style>
<main>
<ol>
<li>Раз</li>
<li class="two">Два</li>
<li style="color: pink">Три</li>
<li id="four">Четыре</li>
</ol>
</main>
```
<details>
<summary> Правильный ответ </summary>
<ul>
<li>Первый элемент - красный (1)</li>
<li>Второй элемент - жёлтый (1)</li>
<li>Третий элемент - розовый (1)</li>
<li>Четвёртый элемент - оранжевый (1)</li>
<li>Цифры - зелёные (1)</li>
<li><img src="https://i.imgur.com/UMWfAlU.png" /></li>
</ul>
</details>
### Задача 2. JS (4 балла, 4 минуты максимум)
#### Что выведет в консоль этот код?
```javascript
const arr = [1, 2, 10]
const res1 = arr.map((x, i) => ({ x, i }))
const res2 = arr.reduce((x, y) => x + y)
const res3 = arr.forEach((x, i) => x += i)
console.log(res1)
console.log(res2)
console.log(res3)
```
<details>
<summary> Правильный ответ </summary>
<ol>
<li> <code>[{x: 1, i: 0}, {x: 2, i: 1}, {x: 10, i: 2}]</code> - может описывать как <i>"массив с тремя объектами. У каждого из объектов есть поля x и i. У мервого элемента x = 1, i = 0..."</i>. Можно попросить напечатать в телемосте. Но важно следить, чтобы не стал вбивать условия задачи куда-то ещё (1)</li>
<li> <code>13</code> (1)</li>
<li> <code>undefined</code> (2)</li>
</ol>
</details>
### Задача 3. JS (2 балла, 3 минуты максимум)
#### Что выведет в консоль этот код?
```javascript
const testObj = {
a: 'test',
b: () => {console.log(this.a.length)}
}
testObj.b()
```
<details>
<summary> Правильный ответ </summary>
Сообщение об ошибке, ибо <code>this</code> в стрелочной функции связано с контекстом самой функции. Один бал за ответ <code>undefined</code> и за обоснование "стрелочная функция"
</details>