@frontend_school #задача

Условие:
Есть секретная строка, которая вам неизвестна. Учитывая набор случайных триплетов из строки, восстановить исходную строку. Триплет здесь - последовательность из трех букв, которые указаны в том же порядке, что и в изначальной строке, но не обязательно подряд. «кто» - это триплет строки «ктоздесь». В качестве упрощения вы можете предположить, что никакая буква не встречается в секретной строке более одного раза.
В вашу задачу входит написать алгоритм, создающий триплеты из загаданной строки, а также алгоритм проверяющий предложенный вами вариант строки.

Например:
"ктоздесь" - возможные триплеты [к, т, о], [о, з, е], [з, е, ь] и так далее. Загаданная строка, соответственно, "ктоздесь".

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

@frontend_school #задача

У любви к фронтенду батарейка не сядет... 🔋

Сегодня хочу предложить решить вам задачу используя только HTML и CSS. Как вам такие задачи?

Условие:
Сделайте страницу или блок на странице, как показано на картинке. Размеры всех частей заданы в пикселях и не меняются в процессе масштабирования окна. Для каждой батарейки постарайтесь обойтись одним элементом. Чем меньше будет использовано классов или id, тем круче, но и без их использования лучше не верстать.

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

@frontend_school #задача

Click'n'Copy

Сегодня я хочу предложить вам задачу, которая может вам попасться в реальной работе.

Условие:
Необходимо написать код, который при нажатии на кнопку копировал текст из блока и заносил его в буфер обмена. Дополнительной сложностью будет реализация копирования при нажатии на сам блок, но это по желанию.

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

@frontend_school #задача

Условие:
Написать функцию, которая принимает в качестве аргумента строку. Строка может содержать любые символы. Задача — вернуть true или false в зависимости от того, в правильном ли порядке расставлены круглые скобки (именно круглые, другие не учитывать).

Например:
"(()))()((()))()" ==> false
"]здесь()(могла(быть))ваша(реклама)[" ==> true

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

@frontend_school #задача №28

Сегодня я предлагаю вам проверить свои знания вёрстки и реализовать страницу аналогичную той, что на видео.

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

@frontend_school #задача №29

Сегодня предлагаю вашему вниманию задачу на вёрстку и стилизацию. Необходимо сделать так, чтобы текст был со смещением, как на картинке выше. Будет ещё круче, если сможете сделать его, как бы уходящим вдаль, как в Star Wars. Ну что, справитесь? 😉

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

@frontend_school #задача #вёрстка_по_макету

Сегодня в качестве задачи хочу предложить вам сверстать одну небольшую страницу по макету. Сверстать нужно с учётом современной семантики и без лишних нагромождений.

Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!

@frontend_school #задача №30

Элементарно, Ватсон!

Вы - сыщик, который расследует различные дела. Как и положено сложным делам в них всегда есть множество улик, нюансов и связей. Так и в этом деле. Есть несколько подозреваемых и вам нужно понять как они связаны между собой. В их показаниях есть совпадения, но нюансов так много, что вы путаетесь. Для этого вы решили написать небольшую программу, которая поможет вам установить как связаны эти люди.

Задача:
Напишите функцию, которая создаст массив из уникальных значений, которые есть в каждом из предоставленных массивов.

Например:
const arr1 = ['b', 'b', 'e'];
const arr2 = ['b', 'c', 'e'];
const arr3 = ['b', 'e', 'c'];
console.log(intersection(arr1, arr2, arr3)) // ['b', 'e']

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

@frontend_school #задача №31

Как насчёт того, чтобы попробовать свои силы в 3D? Предлагаю сегодня попробовать вам сверстать страницу, где будет такой же анимированный кубик, как на видео.
Подсказка: для решения достаточно HTML и CSS 😉

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

@frontend_school #задача #вёрстка

Cuda. Часть 1

Привет всем!
Сегодня я хочу предложить вам интересный и несложный макет для вёрстки. От вас не требуется мгновенный результат, поэтому предлагаю вам сверстать для начала только часть макета, а именно первые два блока - фиолетовый и зелёный. Верстать будем используя только HTML и CSS.

Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!

@frontend_school #задача #вёрстка

Cuda. Часть 2

Привет всем!
Это продолжение вёрстки по макету. Надеюсь, что вы успели сверстать первые два блока и просто не хотите делиться своими достижениями в чате, а не испугались возможных сложностей не стали верстать 😉.
Сегодня я предлагаю сверстать следующие 3 блока - "Meet our beautiful team", "We got skills!" и "Our portfolio".
Верстаем используя только HTML и CSS. Если вы ещё не начали, то присоединяйтесь!

Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!

@frontend_school #задача №32

Берлинские часы

Круглая лампочка вверху конструкции мигает каждые две секунды. Далее наблюдаем четыре ряда лампочек. Верхние два ряда отображают часы. Нижние два отвечают за минуты.
В каждой группе в первом ряду порядковый номер последней горящей лампочки умножаем на 5. Во втором ряду умножаем на 1.
Произведения первого и второго ряда складываем. Сумма верхней группы дает часы в 24-часовом формате. Сумма нижней группы дает минуты.

Условие:
Напишите функцию, которая принимает определенное время в 24-часовом формате ('чч : мм : сс') и выводит строку, воспроизводящую Берлинские часы.
“O” = Лампочка не горит
“R” = Горит красная лампочка
“Y” = Горит жёлтая лампочка

Например:
Ввод:
12:56:01
Вывод:
O
RROO
RROO
YYRYYRYYRYY
YOOO

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

И не стесняйтесь задавать вопросы в чате, если что-то непонятно!