@frontend_school #задача №37

Тест IQ

Знакомьтесь, Боб! Боб готовится сдавать тест на IQ и ему нужна ваша помощь, иначе ему не поздоровится. Наиболее частая задача в этом тесте - найти лишний элемент. Боб заметил, что одно число обычно отличается от других чётностью. Помогите Бобу!

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

Например:
iqTest("2 4 7 8 10") => 3 // Третье число нечётное, в то время, как все остальные чётные

iqTest("1 2 1 1") => 2 // Второе число чётное, в то время, как все остальные нечётные

Примечание:
Имейте в виду, что ваша задача - помочь Бобу пройти настоящий тест на IQ, что означает, что индексы элементов начинаются с 1 (а не с 0).

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

И не стесняйтесь задавать вопрос, если зашли в тупик!

@frontend_school #юмор

@frontend_school #интересное

Пикачу на сёрфе

Сделан в виде svg картинок и анимирован с помощью сторонней библиотеки GreenSock.

@frontend_school #статья #JavaScript

13 полезных однострочников на JavaScript

Однострочник — фрагмент кода в одну строку и решающий задачу, на которую у новичка может уйти пара десятков строк. В этой статье собраны 13 однострочников, которые могут вам пригодиться.

@frontend_school #викторина

@frontend_school #ответ_на_задачу

По ссылке ниже представлено решение задачи №37 «Тест IQ».

Обращаю ваше внимание, что это только один из возможных вариантов решения. И если вы решили иначе, то это не значит, что ваш вариант неправильный.

Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!

@frontend_school #юмор

@frontend_school #интересное

Как далеко проскроллишь?

Забавный проект, который считает в метрах как много ты проскроллил вниз. Интересен с точки зрения кода - бесконечная прокрутка и подсчёт пройденного расстояния.

@frontend_school #статья #JavaScript

Деструктуризация в ES6. Полное руководство

Деструктуризация просто подразумевает разбивку сложной структуры на простые части. В JavaScript, таковая сложная структура обычно является объектом или массивом. Используя синтаксис деструктуризации, вы можете выделить маленькие фрагменты из массивов или объектов. Такой синтаксис может быть использован для объявления переменных или их назначения. Вы также можете управлять вложенными структурами, используя уже синтаксис вложенной деструктуризации.

@frontend_school #викторина_недели

Это 11-я еженедельная викторина, основанная на вопросах, публиковавшихся в течении недели. Вы можете закрепить, полученные знания, ответив на несколько вопросов. Для ответа на каждый вопрос даётся 30 секунд.

А вот топ-10 прошлой викторины:
🥇 @ivan_beletsky – 6 (1 мин 46 сек)
🥈 @panamanap – 5 (1 мин 1 сек)
🥉 @natalia_koshevaya – 5 (1 мин 32 сек)
 4. @awaqum – 5 (1 мин 56 сек)
 5. @nikolay696 – 4 (1 мин 58 сек)
 6. @Camrado – 3 (1 мин 8 сек)
 7. @artem_pleskachov – 3 (1 мин 2 сек)
 8. @Elena_mariupol – 3 (1 мин 34 сек)
 9. @Marianakukhar – 3 (1 мин 9 сек)
 10. @maxguitarman – 3 (2 мин 13 сек)

Проверьте свои навыки и знания!

@frontend_school #полезное

Прижатый футер

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

Существуют разные способы прижать подвал:
- абсолютное позиционирование 
- минимальная высота контента
- табличная верстка
- css flex
- css grid

Сегодня будут рассмотрены два варианта, как наиболее актуальные - с помощью flex и с помощью grid.
В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер.

@frontend_school #юмор

@frontend_school #интересное

Карусель

Выполнена на чистом CSS. Никакого JS. Необычный внешний вид достигнут благодяря CSS свойству clip-path.

@frontend_school #статья #CSS

10 полезных инструментов для создания роскошного CSS

Чтобы страница выглядела именно так, как задумано дизайнером, используют CSS. Но держать в голове все стили и их параметры сложно — их сотни. Чаще всего разработчик помнит самые ходовые и популярные, а за остальными обращается к справочникам и специальным программам-генераторам.

@frontend_school #викторина

@frontend_school #юмор

@frontend_school #интересное

Nodivember. Карандаш

Сегодня предлагаю вам посмотреть на такой интересный проект, как анимированный карандаш, выполненный без использования блока <div></div>. В общем-то поэтому он и участвует в челендже Nodivember. Посмотрите, как реализована данная анимация.

@frontend_school #статья #JavaScript

JavaScript Maps vs Обычные объекты: смертельная битва

Стандарт ES6 дал в руки разработчикам мощное и гибкое оружие – JavaScript Maps. Кажется, простым объектам уже пора на покой... Или нет?