---
# System prepended metadata

title: '# Тестовое задание для фронтенда (C ОТВЕТАМИ)'
tags: [СКАУТ]

---

# Тестовое задание для фронтенда
## СКАУТ
<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>