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