Тестовые задания по JavaScript
Здесь собраны реальные тестовые задания, которые дают соискателям на стажировках и junior-позициях. Эти задания помогут лучше подготовиться к отбору, потренироваться и пополнить портфолио
Dapplets • Средняя сложность
Тестовое задание по JavaScript от компании Dapplets
Тестовое задание на вакансию “Frontend Developer” О нас: Dapplets Project - cтартап-криптоплатформа для приложений Augmented Web. Мы переносим идеи децентрализации и устойчивости на уровень визуального UI/UX традиционных сайтов. Мы строим платформу Аугментированного веба, состоящую из браузерного плагина и децентрализованных приложений (дапплетов), основанных на крипто-технологиях. Наша платформа создается в виде open-source framework для разработчиков со всего мира. В ваши задачи будет входить: разработка клиентской части веб-приложений с использованием React; вёрстка макетов из Figma; написание и отладка TypeScript/JavaScript кода, рефакторинг; взаимодействие с остальными участниками проекта (UI/UX, backend). Оплата тестового задания В случае вашего трудоустройства, выполнение тестового задания будет оплачено из расчета 3-х рабочих дней. Тестовое задание: Вы можете сделать тестовое задание частично. Сверстать страничку по макету Figma (без прелоадера) с использованием фреймворка React и языка TypeScript: Макет: https://www.figma.com/file/YGXq1mzXTTc4Rfwt5vxgUo Презентация макета: https://www.figma.com/proto/YGXq1mzXTTc4Rfwt5vxgUo Адаптивная вёрстка для desktop и mobile устройств Fuzzy and Live Search (живой фильтр) debounce c окончательной фильтрацией на клиенте. Сервер может вернуть “неподходящие” элементы, которые не попадают в фильтр. Их надо будет выкинуть и запросить еще пакет данных взамен выкинутых. Постраничный вывод (по мере скроллинга) Обработка серверных ошибок (вывод в область сообщений) Обработка ошибок скачивания картинок Состояние интерфейса сохранить в LocalStorage (installed/not installed) Drag & drop для сортировки элементов списка Привязать бэкенд https://dapplets-hiring-api.herokuapp.com/ Результат тестового задания Результатом тестового задания будет: Пояснительная записка, какие пункты из ТЗ сделаны; Ссылка на опубликованный на Github проект; Ссылка на Live Demo проекта на любом хостинге (например, Netlify). Готовое тестовое задание присылайте в HeadHunter. Структура и функционал макета в Figma: (другие элементы макета имплементировать не нужно) Строка поиска + кнопка для направления сортировки Строка сообщений состояния и ошибок (в самом верху). Список плашек элементов спиcка (Items) UserGenerated Icon Текст названия (1 строчка) Текст описания (мультилайн) Статичный тэги (несколько штук) Гибридная кнопка (статус/действие) с 2мя состояниями и rollover. Если приложение не установлено, то отображается "INSTALL". Если приложение установлено, то отображается "INSTALLED" и при наведении курсора мыши надпись должна поменяться на "UNINSTALL". Этот статус сохраняется в localstorage, чтобы после перезагрузки страницы он не сбросился. Никаких приложений, конечно же, устанавливать не надо. Это только фронтенд. По клику на элемент списка, открывается Аккордеон (открытие плашки приложения). Драг и Дроп элементов списка (ручная пересортировка). В макете есть “область захвата”. Постраничная загрузка по мере скроллинга Loader с анимацией Адаптивность под Mobile и Desktop Перемещение блоков на разных устройствах Скрытие лишнего функционала на мобильных устройствах Свойства Бэкенда backend с HTTP API Возвращает ссылки на картинки, расположенные на другом сервере Картинки могут быть недоступными Могут быть тяжёлыми Сервер с картинками может долго отвечать Возвращает список приложений Серверная фильтрация* Серверная сортировка* Постраничная загрузка* Возвращает список тегов Может вернуть слишком длинный title или description Может долго отвечать Может возвращать ошибки Может отвалиться и вернуть невалидный ответ Спецификация на backend https://dapplets-hiring-api.herokuapp.com/
KosyanMedia • Лёгкая сложность
Тестовое задание по JavaScript от компании KosyanMedia
Тестовое задание - Frontend Developer (Travelpayouts) Цель Сделать виджет формы, который будет вставляться на сторонние сайты. Дано Макет респонсивной формы лежит в этом репозитории TP_test.sketch/TP_test.pdf/TP_test.png. Задача На выходе должен получиться проект на Github.com с инструкцией по развёртыванию и запуску на *nix/OS X операционной системе. Результатом запуска проекта должна быть HTML-страница с примером вставленного виджета формы, которую можно открыть в браузере. Требования: Респонсивная форма, минимальная ширина 200px, максимальная 1024px. Предпочитаемые технологии webpack, PostCSS и SVG Если будете использовать фреймворк или сторонние библиотеки, подумайте над обоснованием их использования По желанию: К полям с датами подключить датапикеры, формат даты dd.mm.yyyy Сделать возможность кастомизации цветов кнопки, фона и текста. Кастомизация осуществляется изменением настроек в коде для вставки. TypeScript Локализацию на английский Наводящие вопросы: Какие сложности могут возникнуть при размещении формы на сторонних сайтах? Какие вы можете выделить наиболее важные характеристики виджетов, встраиваемых на сторонние сайты?
KosyanMedia • Лёгкая сложность
Тестовое задание по JavaScript от компании KosyanMedia
Тестовое задание - Frontend Developer (Travelpayouts) Цель Сделать виджет формы, который будет вставляться на сторонние сайты. Дано Макет респонсивной формы лежит в этом репозитории TP_test.sketch/TP_test.pdf/TP_test.png. Задача На выходе должен получиться проект на Github.com с инструкцией по развёртыванию и запуску на *nix/OS X операционной системе. Результатом запуска проекта должна быть HTML-страница с примером вставленного виджета формы, которую можно открыть в браузере. Требования: Респонсивная форма, минимальная ширина 200px, максимальная 1024px. Предпочитаемые технологии webpack, PostCSS и SVG Если будете использовать фреймворк или сторонние библиотеки, подумайте над обоснованием их использования По желанию: К полям с датами подключить датапикеры, формат даты dd.mm.yyyy Сделать возможность кастомизации цветов кнопки, фона и текста. Кастомизация осуществляется изменением настроек в коде для вставки. TypeScript Локализацию на английский Наводящие вопросы: Какие сложности могут возникнуть при размещении формы на сторонних сайтах? Какие вы можете выделить наиболее важные характеристики виджетов, встраиваемых на сторонние сайты?
CS-Cart • Средняя сложность
Тестовое задание по JavaScript от компании CS-Cart
Тестовое задание для Javascript разработчика Задача Реализовать конфигуратор стоимости доставки товара в разные регионы страны с наценками за вес посылки. Основные элементы конфигуратора: 1. Элемент для поиска тарифных зон Список тарифных зон грузится с бэкенда асинхронно. Бэкенд реализовывать не нужно — список зон нужно грузить из JSON-файла. Элемент поддерживает фильтрацию по названию. Достаточно реализовать простой поиск и показывать только те тарифные зоны, названия которых начинаются с введенного текста. Нажатие на "Добавить" рядом с названием тарифной зоны добавляет ее в список настроенных тарифных зон. Для тарифных зон, добавленных в список настроенных тарифных зон, вместо кнопки "Добавить" отображается кнопка "Удалить", которая отменяет доставку в данную тарифную зону и убирает ее из списка.2. Список настроенных тарифных зон Тарифные зоны в списке упорядочены по алфавиту. Для каждой позиции в списке задается базовая стоимость доставки. Стоимость доставки задается в рублях с двумя знаками после запятой. Поле поддерживает ввод только цифр и символа ".". У каждой позиции списка есть кнопка "Добавить наценку", которая добавляет новую пустую позицию в список наценок тарифной зоны. У каждой позиции списка есть кнопка "Удалить". Ее поведение описано в п. 1.4. 3. Список наценок тарифной зоны У каждой позиции списка есть поля для ввода диапазона веса посылки и поле для ввода наценки. Вес посылки задается в килограммах с тремя знаками после запятой. Поле поддерживает ввод только цифр и символов ".", "+" и "-". Если задана положительная наценка, перед ней нужно выводить "+", если отрицательная — "-". Для каждой позиции списка отображается конечная стоимость доставки. Конечная стоимость — сумма базовой стоимости доставки в тарифную зону (п. 2.2) и наценки. При измененнии базовой стоимости и наценки конечная стоимость доставки пересчитывается. У каждой позиции списка есть кнопка "Удалить наценку", которая удаляет позицию списка.4. Кнопка "Сохранить изменения" При нажатии на кнопку происходит проверка формы. Если список настроенных тарифных зон пустой, должно показываться сообщение "Доставка не настроена". Если для тарифной зоны не задана базовая стоимость — под полем ввода базовой стоимости должно отображаться сообщение "Укажите базовую стоимость". Если в списке наценок не указаны значения в полях веса — под пустым полем должно отображаться сообщение "Укажите вес". Если в списке наценок не указана наценка — под пустым полем должно отображаться сообщение "Укажите наценку". Если в списке наценок тарифной зоны диапазоны веса перекрывают друг друга — под тарифной зоной должно отображаться сообщение "Диапазоны веса перекрываются". Если форма не содержит ошибок — показывается сообщение "Сохранено" и в консоль логируется состояние формы в следующем формате: [ { "rate_area_id": ID-тарифной-зоны, "base_charge_value": базовая-стоимость-доставки, "extra_charges": [ { "min_weight": минимальный-вес-диапазона, "max_weight": максимальный-вес-диапазона, "charge_value": величина-наценки }, ... ] } ] Требования Реализовать на jQuery (допустимо использование любых плагинов) или чистом Javascript (ECMAScript 6). JSON-файл должен загружаться AJAX-запросом. Пока файл не загружен, никаких элементов UI, относящихся к фильтрам, не должно быть отрисовано. Код структурировать и разделять — должна просматриваться архитектура Javascript приложения. Использовать HTML шаблоны для элементов списков. Использовать семантическую верстку, именовать блоки и элементы по БЭМ. Старые браузеры не поддерживать: должно работать в самых новых версиях Firefox и Chrome. Результат оформить в виде репозитория на Github.
без ограничений.
Чтобы получить полный доступ,
вам необходимо зарегистрироваться.