@frontquizes - тесты по фронтенд технологиям, преимущественно Javascript/React/HTML/CSS

Ocean card, perspective shift on hover

Смена перспективы при наведении мыши на карточку. Сделано с помощью SCSS и JS (Babel).

#js

Masked Circle Slider

Сверстано на HTML и SCSS. Логика переключения слайдов реализована в JS.

#js

Rating

Выставление рейтинга в виде звезд, анимация реализована с помощью библиотеки GSAP.

#js

Temperature displays

Индикаторы - это svg-картинки, параметры которых задаются в JS.

#js

JavaScript. Задача

Ищем блок поврежденных пикселей.

Дана матрица пикселей, где '0' представляет рабочий пиксель, а '1' - поврежденный.

Поврежденные пиксели связаны (т.е. есть только одна поврежденная область на матрице). Пиксели соединены по горизонтали и вертикали.

Также даны два целых числа - x и y - представляющие расположение одного из поврежденных пикселей.

Необходимо найти площадь наименьшего (выровненного по оси) прямоугольника, охватывающего все поврежденные пиксели.

Входные данные:
- Стороны матрицы имеют размер от 1 до 100 пикселей включительно
- Элементы матрицы - символы '0', '1'.

Вывод: площадь наименьшего прямоугольника, охватывающего все поврежденные пиксели.

Пример:

matrix = [
['0','0','1','0'],
['0','1','1','0'],
['0','1','0','0']
].
x = 0, y = 2
Output: 6

Ответ

Project Management Dashboard UI

Пользовательский интерфейс панели управления проектами, реализован с помощью CSS и JS.

#css #js

Menu Animation

Анимация кнопки меню, реализованная с помощью CSS и JavaScript.

#js

​Основные принципы хорошего нейминга

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

#ru

Live data

Демонстрация работы графика с автоматическим обновлением данных. Создано с использованием библиотеки amCharts.

#js

JavaScript. Что будет выведено в консоль?

Ответ

Хотите узнать, как создать чат-приложение с использованием React и WebSockets?

На вебинаре вы узнаете:
- Основы WebSockets и их интеграция с React.
- Реализация функциональности чата.
- Управление состоянием и работа с хранилищем данных (обновление интерфейса при изменении состояния).

Этот вебинар будет полезен:
- JavaScript-разработчикам, которые хотят улучшить навыки работы с React и узнать особенности работы и обновления приложения в режиме реального времени.
- Frontend-разработчикам, желающим понять и использовать WebSockets для создания интерактивных приложений.
- Fullstack-разработчикам для дополнения своих знаний и получения навыков интеграции WebSocket серверов с React-приложениями.

После вебинара вы сможете:
- Настроить и управлять WebSocket соединением в React-проектах.
- Управлять состоянием в React-проектах и работать с хранилищами данных для сохранения истории сообщений.
- Применить знания для создания разнообразных приложений реального времени (чаты, системы уведомлений, онлайн-игры).

Урок пройдет 7 ноября в 20:00 мск и будет приурочен к старту большого курса «React.js Developer». После вебинара вы получите специальную цену на обучение и персональную консультацию от менеджеров!

Регистрируйтесь на открытый вебинар прямо сейчас! 👇

https://vk.cc/cDMkK8

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Typing Effect

Эффект последовательного ввода букв, реализованный в JS.

#js