@frontend_school #задача
Условие:
Есть секретная строка, которая вам неизвестна. Учитывая набор случайных триплетов из строки, восстановить исходную строку. Триплет здесь - последовательность из трех букв, которые указаны в том же порядке, что и в изначальной строке, но не обязательно подряд. «кто» - это триплет строки «ктоздесь». В качестве упрощения вы можете предположить, что никакая буква не встречается в секретной строке более одного раза.
В вашу задачу входит написать алгоритм, создающий триплеты из загаданной строки, а также алгоритм проверяющий предложенный вами вариант строки.
Например:
"ктоздесь" - возможные триплеты [к, т, о], [о, з, е], [з, е, ь] и так далее. Загаданная строка, соответственно, "ктоздесь".
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Условие:
Есть секретная строка, которая вам неизвестна. Учитывая набор случайных триплетов из строки, восстановить исходную строку. Триплет здесь - последовательность из трех букв, которые указаны в том же порядке, что и в изначальной строке, но не обязательно подряд. «кто» - это триплет строки «ктоздесь». В качестве упрощения вы можете предположить, что никакая буква не встречается в секретной строке более одного раза.
В вашу задачу входит написать алгоритм, создающий триплеты из загаданной строки, а также алгоритм проверяющий предложенный вами вариант строки.
Например:
"ктоздесь" - возможные триплеты [к, т, о], [о, з, е], [з, е, ь] и так далее. Загаданная строка, соответственно, "ктоздесь".
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
@frontend_school #задача
У любви к фронтенду батарейка не сядет... 🔋
Сегодня хочу предложить решить вам задачу используя только HTML и CSS. Как вам такие задачи?
Условие:
Сделайте страницу или блок на странице, как показано на картинке. Размеры всех частей заданы в пикселях и не меняются в процессе масштабирования окна. Для каждой батарейки постарайтесь обойтись одним элементом. Чем меньше будет использовано классов или id, тем круче, но и без их использования лучше не верстать.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
У любви к фронтенду батарейка не сядет... 🔋
Сегодня хочу предложить решить вам задачу используя только HTML и CSS. Как вам такие задачи?
Условие:
Сделайте страницу или блок на странице, как показано на картинке. Размеры всех частей заданы в пикселях и не меняются в процессе масштабирования окна. Для каждой батарейки постарайтесь обойтись одним элементом. Чем меньше будет использовано классов или id, тем круче, но и без их использования лучше не верстать.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
@frontend_school #задача
Click'n'Copy
Сегодня я хочу предложить вам задачу, которая может вам попасться в реальной работе.
Условие:
Необходимо написать код, который при нажатии на кнопку копировал текст из блока и заносил его в буфер обмена. Дополнительной сложностью будет реализация копирования при нажатии на сам блок, но это по желанию.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Click'n'Copy
Сегодня я хочу предложить вам задачу, которая может вам попасться в реальной работе.
Условие:
Необходимо написать код, который при нажатии на кнопку копировал текст из блока и заносил его в буфер обмена. Дополнительной сложностью будет реализация копирования при нажатии на сам блок, но это по желанию.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
@frontend_school #задача
Условие:
Написать функцию, которая принимает в качестве аргумента строку. Строка может содержать любые символы. Задача — вернуть
Например:
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Условие:
Написать функцию, которая принимает в качестве аргумента строку. Строка может содержать любые символы. Задача — вернуть
true или false в зависимости от того, в правильном ли порядке расставлены круглые скобки (именно круглые, другие не учитывать).Например:
"(()))()((()))()" ==> false"]здесь()(могла(быть))ваша(реклама)[" ==> trueПрисылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #задача №28
Сегодня я предлагаю вам проверить свои знания вёрстки и реализовать страницу аналогичную той, что на видео.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Сегодня я предлагаю вам проверить свои знания вёрстки и реализовать страницу аналогичную той, что на видео.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
@frontend_school #задача №29
Сегодня предлагаю вашему вниманию задачу на вёрстку и стилизацию. Необходимо сделать так, чтобы текст был со смещением, как на картинке выше. Будет ещё круче, если сможете сделать его, как бы уходящим вдаль, как в Star Wars. Ну что, справитесь? 😉
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Сегодня предлагаю вашему вниманию задачу на вёрстку и стилизацию. Необходимо сделать так, чтобы текст был со смещением, как на картинке выше. Будет ещё круче, если сможете сделать его, как бы уходящим вдаль, как в Star Wars. Ну что, справитесь? 😉
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
@frontend_school #задача #вёрстка_по_макету
Сегодня в качестве задачи хочу предложить вам сверстать одну небольшую страницу по макету. Сверстать нужно с учётом современной семантики и без лишних нагромождений.
Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!
Сегодня в качестве задачи хочу предложить вам сверстать одну небольшую страницу по макету. Сверстать нужно с учётом современной семантики и без лишних нагромождений.
Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!
@frontend_school #задача №30
Элементарно, Ватсон!
Вы - сыщик, который расследует различные дела. Как и положено сложным делам в них всегда есть множество улик, нюансов и связей. Так и в этом деле. Есть несколько подозреваемых и вам нужно понять как они связаны между собой. В их показаниях есть совпадения, но нюансов так много, что вы путаетесь. Для этого вы решили написать небольшую программу, которая поможет вам установить как связаны эти люди.
Задача:
Напишите функцию, которая создаст массив из уникальных значений, которые есть в каждом из предоставленных массивов.
Например:
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Элементарно, Ватсон!
Вы - сыщик, который расследует различные дела. Как и положено сложным делам в них всегда есть множество улик, нюансов и связей. Так и в этом деле. Есть несколько подозреваемых и вам нужно понять как они связаны между собой. В их показаниях есть совпадения, но нюансов так много, что вы путаетесь. Для этого вы решили написать небольшую программу, которая поможет вам установить как связаны эти люди.
Задача:
Напишите функцию, которая создаст массив из уникальных значений, которые есть в каждом из предоставленных массивов.
Например:
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 и присылайте ссылку на результат!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #задача №31
Как насчёт того, чтобы попробовать свои силы в 3D? Предлагаю сегодня попробовать вам сверстать страницу, где будет такой же анимированный кубик, как на видео.
Подсказка: для решения достаточно HTML и CSS 😉
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Как насчёт того, чтобы попробовать свои силы в 3D? Предлагаю сегодня попробовать вам сверстать страницу, где будет такой же анимированный кубик, как на видео.
Подсказка: для решения достаточно HTML и CSS 😉
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
@frontend_school #задача #вёрстка
Cuda. Часть 1
Привет всем!
Сегодня я хочу предложить вам интересный и несложный макет для вёрстки. От вас не требуется мгновенный результат, поэтому предлагаю вам сверстать для начала только часть макета, а именно первые два блока - фиолетовый и зелёный. Верстать будем используя только HTML и CSS.
Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!
Cuda. Часть 1
Привет всем!
Сегодня я хочу предложить вам интересный и несложный макет для вёрстки. От вас не требуется мгновенный результат, поэтому предлагаю вам сверстать для начала только часть макета, а именно первые два блока - фиолетовый и зелёный. Верстать будем используя только HTML и CSS.
Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!
@frontend_school #задача #вёрстка
Cuda. Часть 2
Привет всем!
Это продолжение вёрстки по макету. Надеюсь, что вы успели сверстать первые два блока и просто не хотите делиться своими достижениями в чате, а не испугались возможных сложностей не стали верстать 😉.
Сегодня я предлагаю сверстать следующие 3 блока - "Meet our beautiful team", "We got skills!" и "Our portfolio".
Верстаем используя только HTML и CSS. Если вы ещё не начали, то присоединяйтесь!
Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!
Cuda. Часть 2
Привет всем!
Это продолжение вёрстки по макету. Надеюсь, что вы успели сверстать первые два блока и просто не хотите делиться своими достижениями в чате, а не испугались возможных сложностей не стали верстать 😉.
Сегодня я предлагаю сверстать следующие 3 блока - "Meet our beautiful team", "We got skills!" и "Our portfolio".
Верстаем используя только HTML и CSS. Если вы ещё не начали, то присоединяйтесь!
Присылайте свои варианты вёрстки в чат! Можете разместить свой вариант на github, codepen или просто кинуть архивом в чат!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #задача №32
Берлинские часы
Круглая лампочка вверху конструкции мигает каждые две секунды. Далее наблюдаем четыре ряда лампочек. Верхние два ряда отображают часы. Нижние два отвечают за минуты.
В каждой группе в первом ряду порядковый номер последней горящей лампочки умножаем на 5. Во втором ряду умножаем на 1.
Произведения первого и второго ряда складываем. Сумма верхней группы дает часы в 24-часовом формате. Сумма нижней группы дает минуты.
Условие:
Напишите функцию, которая принимает определенное время в 24-часовом формате ('чч : мм : сс') и выводит строку, воспроизводящую Берлинские часы.
“O” = Лампочка не горит
“R” = Горит красная лампочка
“Y” = Горит жёлтая лампочка
Например:
Ввод:
Вывод:
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопросы в чате, если что-то непонятно!
Берлинские часы
Круглая лампочка вверху конструкции мигает каждые две секунды. Далее наблюдаем четыре ряда лампочек. Верхние два ряда отображают часы. Нижние два отвечают за минуты.
В каждой группе в первом ряду порядковый номер последней горящей лампочки умножаем на 5. Во втором ряду умножаем на 1.
Произведения первого и второго ряда складываем. Сумма верхней группы дает часы в 24-часовом формате. Сумма нижней группы дает минуты.
Условие:
Напишите функцию, которая принимает определенное время в 24-часовом формате ('чч : мм : сс') и выводит строку, воспроизводящую Берлинские часы.
“O” = Лампочка не горит
“R” = Горит красная лампочка
“Y” = Горит жёлтая лампочка
Например:
Ввод:
12:56:01Вывод:
ORROORROOYYRYYRYYRYYYOOOПрисылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопросы в чате, если что-то непонятно!
@frontend_school #задача №33
Пятница 13-е
Пятница 13-е считается несчастливым днём во многих странах мира, а в некоторых число 13 стараются и вовсе избегать - даже этажи не нумеруют этим числом.
Условие:
Написать функцию, которая принимает в качестве аргумента год (например, 2020) и возвращает число, сколько раз пятница 13-е случается в этом году.
Например:
При вводе 1812 года должна вернуться цифра 2.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопросы в чате, если что-то непонятно!
Пятница 13-е
Пятница 13-е считается несчастливым днём во многих странах мира, а в некоторых число 13 стараются и вовсе избегать - даже этажи не нумеруют этим числом.
Условие:
Написать функцию, которая принимает в качестве аргумента год (например, 2020) и возвращает число, сколько раз пятница 13-е случается в этом году.
Например:
При вводе 1812 года должна вернуться цифра 2.
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопросы в чате, если что-то непонятно!
@frontend_school #задача №34
Сортируем поезда
Вы диспетчер на железнодорожной станции. Вдруг оказалось, что на соседней станции неопытный диспетчер перепутал расписание и теперь поезда будут идти в неверном порядке, что создаст проблемы. Ваша задача отсортировать поезда в соответствии с вашей инструкцией.
Условие:
Необходимо написать функцию
Например:
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопросы в чате, если что-то непонятно!
Сортируем поезда
Вы диспетчер на железнодорожной станции. Вдруг оказалось, что на соседней станции неопытный диспетчер перепутал расписание и теперь поезда будут идти в неверном порядке, что создаст проблемы. Ваша задача отсортировать поезда в соответствии с вашей инструкцией.
Условие:
Необходимо написать функцию
sortTrains, которая будет принимать массив чисел и возвращать его отсортированным следующим образом - в массиве сортируются по возрастанию нечётные числа, а чётные при этом остаются на своих местах, не меняя при этом свой индекс в массиве.Например:
sortTrains([5, 3, 2, 8, 1, 4]) // [1, 3, 2, 8, 5, 4]Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопросы в чате, если что-то непонятно!
@frontend_school #навигация
Навигация на канале
Для более удобного взаимодействия с каналом мы сделали инструкцию по взаимодействию с рубриками и направлениями канала:
#интересное - интересные проекты и заметки.
#статья - полезные статьи.
#викторина - ежедневные викторины.
#викторина_недели - еженедельные викторины с несколькими вопросами на время.
#задача - задачи на различные темы и по разным технологиям.
#ответ_на_задачу - способ решения ранее заданной задачи.
#туториал - туториалы и пошаговые инструкции применения различных технологий.
#видео - видео с лекциями и уроками.
#юмор - смешные картинки и видео, связанные с веб-разработкой и программированием.
#полезное - полезные сервисы и статьи, которые помогут проще и быстрее освоить ту или иную технологию.
#HTML, #CSS, #JavaScript - дополнительные теги, уточняющие тематику публикации.
Также не забывайте про наш главный чат Frontend.school("Чат"), где можно пообщаться на тему фронтенд-разработки, а также задать свой вопрос и получить ответ.
Навигация на канале
Для более удобного взаимодействия с каналом мы сделали инструкцию по взаимодействию с рубриками и направлениями канала:
#интересное - интересные проекты и заметки.
#статья - полезные статьи.
#викторина - ежедневные викторины.
#викторина_недели - еженедельные викторины с несколькими вопросами на время.
#задача - задачи на различные темы и по разным технологиям.
#ответ_на_задачу - способ решения ранее заданной задачи.
#туториал - туториалы и пошаговые инструкции применения различных технологий.
#видео - видео с лекциями и уроками.
#юмор - смешные картинки и видео, связанные с веб-разработкой и программированием.
#полезное - полезные сервисы и статьи, которые помогут проще и быстрее освоить ту или иную технологию.
#HTML, #CSS, #JavaScript - дополнительные теги, уточняющие тематику публикации.
Также не забывайте про наш главный чат Frontend.school("Чат"), где можно пообщаться на тему фронтенд-разработки, а также задать свой вопрос и получить ответ.
@frontend_school #задача №35
Убить Ахиллеса
Число Ахиллеса - это такое положительное целое число, которое не может быть представлено как m в степени k, но может как m^k • n^a, где k и a больше 1. Например, 108 - число Ахиллеса. Его разложение на простые множители равно 2^2 · 3^3, и, следовательно, его простые множители равны 2 и 3. Оба 2^2 = 4 и 3^2 = 9 являются делителями 108. Однако 108 не может быть представлено как m^k, где m и k положительные целые числа > 1, поэтому 108 - число Ахиллеса. Подробнее тут.
Условие:
Написать функцию, которая принимает в качестве аргумента массив чисел и возвращает массив уже с убранными числами Ахиллеса из массива.
Например:
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
Убить Ахиллеса
Число Ахиллеса - это такое положительное целое число, которое не может быть представлено как m в степени k, но может как m^k • n^a, где k и a больше 1. Например, 108 - число Ахиллеса. Его разложение на простые множители равно 2^2 · 3^3, и, следовательно, его простые множители равны 2 и 3. Оба 2^2 = 4 и 3^2 = 9 являются делителями 108. Однако 108 не может быть представлено как m^k, где m и k положительные целые числа > 1, поэтому 108 - число Ахиллеса. Подробнее тут.
Условие:
Написать функцию, которая принимает в качестве аргумента массив чисел и возвращает массив уже с убранными числами Ахиллеса из массива.
Например:
array = [108, 99, 100, 64, 72] //array = [99, 100, 64]Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
@frontend_school #задача №36
Калькулятор функций
Условие:
Написать вычисления с использованием функций и получить результаты.
Функции чисел должны быть от 0 до 9.
Функции математические должны быть следующие: сложение, вычитание, умножение и деление. Все результаты вычислений должны быть в виде целых чисел.
Например:
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
Калькулятор функций
Условие:
Написать вычисления с использованием функций и получить результаты.
Функции чисел должны быть от 0 до 9.
Функции математические должны быть следующие: сложение, вычитание, умножение и деление. Все результаты вычислений должны быть в виде целых чисел.
Например:
seven(times(five())); // возвращает 35four(plus(nine())); // возвращает 13eight(minus(three())); // возвращает 5six(dividedBy(two())); // возвращает 3Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
@frontend_school #задача №37
Тест IQ
Знакомьтесь, Боб! Боб готовится сдавать тест на IQ и ему нужна ваша помощь, иначе ему не поздоровится. Наиболее частая задача в этом тесте - найти лишний элемент. Боб заметил, что одно число обычно отличается от других чётностью. Помогите Бобу!
Условие:
Написать функцию, которая среди заданных чисел найдет одно, отличающееся по чётности, и вернёт позицию этого числа.
Например:
Примечание:
Имейте в виду, что ваша задача - помочь Бобу пройти настоящий тест на IQ, что означает, что индексы элементов начинаются с 1 (а не с 0).
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
Тест IQ
Знакомьтесь, Боб! Боб готовится сдавать тест на IQ и ему нужна ваша помощь, иначе ему не поздоровится. Наиболее частая задача в этом тесте - найти лишний элемент. Боб заметил, что одно число обычно отличается от других чётностью. Помогите Бобу!
Условие:
Написать функцию, которая среди заданных чисел найдет одно, отличающееся по чётности, и вернёт позицию этого числа.
Например:
iqTest("2 4 7 8 10") => 3 // Третье число нечётное, в то время, как все остальные чётныеiqTest("1 2 1 1") => 2 // Второе число чётное, в то время, как все остальные нечётныеПримечание:
Имейте в виду, что ваша задача - помочь Бобу пройти настоящий тест на IQ, что означает, что индексы элементов начинаются с 1 (а не с 0).
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
@frontend_school #задача №38
Самый одинокий символ
Условие:
Необходимо написать функцию, которая принимает строку и возвращает массив символов, у которых есть наибольшее количество пробелов справа и слева.
Например:
Примечание:
1. Пробелы перед строкой и после строки не учитываются
2. Строка не должна содержать одинаковый символ более одного раза
3. Порядок символов в возвращаемом массиве не имеет значения
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
Самый одинокий символ
Условие:
Необходимо написать функцию, которая принимает строку и возвращает массив символов, у которых есть наибольшее количество пробелов справа и слева.
Например:
"a b c" --> ["b"]"a bcs d k" --> ["d"]" a b sc p t k" --> ["p"]"a b c de" --> ["b", "c"]" a b c de " --> ["b"]"abc" --> ["a", "b", "c"]Примечание:
1. Пробелы перед строкой и после строки не учитываются
2. Строка не должна содержать одинаковый символ более одного раза
3. Порядок символов в возвращаемом массиве не имеет значения
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!