Тестовые задания по JavaScript
Здесь собраны реальные тестовые задания, которые дают соискателям на стажировках и junior-позициях. Эти задания помогут лучше подготовиться к отбору, потренироваться и пополнить портфолио
BirdsBuild • Высокая сложность
Тестовое задание по JavaScript от компании BirdsBuild
Тестовое задание на позицию «Frontend разработчик Nuxt.js» Средствами Vue.js реализуйте небольшое SPA приложение, которое состоит из 3 страниц: «Избранное», «Склад», «Сделки». Ссылка на макет: https://www.figma.com/file/esSprOWWWjJ1Gb7IoMHGmq/Untitled?node-id=0%3A1 Срок выполнения задания: 7 дней Готовое задание выложить на GitHub или GitLab, и опционально залить на vercel или другой удобный хостинг. Описание страниц: Приложение запускается со страницы «Склад». На которой можно выполнить следующие действия: Сортировка по типам предложений (Все, Аукцион, Прямые продажи); Поиск по наименованию; Добавить в сделки; Добавить в избранное; На странице «Сделки» выполняются следующие действия: - Сортировка по типам предложений (Все, Аукцион, Прямые продажи); Оплатить; Добавить в избранное; На странице «Избранное» выполняются следующие действия: - Сортировка по типам предложений (Все, Аукцион, Прямые продажи); Оплатить; Добавить в сделки; Описание карточки предложения: Карточки предложений включают в себя следующие пункты: Изображение товара; Тип Предложения: аукцион или разовое предложение( относится к прямым продажам); Название товара; Город (в котором находится товар); Продавец (название компании); Вид товар; Описание товара; Цена товара; Количество товара; Задачи: Создать компонент «Карточка предложения» (Включает фейковые данные из JSON’a, предложений должно быть не меньше 10 штук); Отобразить карточки предложений в разделе «Склад»; Сортировка предложений (все, аукцион, прямые продажи); Поиск в складе по названию товара; Кнопка «Добавить в сделки» (по клику карточка добавляется в раздел «Сделки»); Кнопка добавления предложения в избранное (по клику предложение добавляется в раздел «Избранное»); Кнопка «Оплатить» в разделе «Сделки»; Кнопка «Оплачено» в разделе «Сделки» (состояние disabled, после клика на кнопку «Оплатить»); Требования к функционалу: Все действия на сайте должны происходить без перезагрузки страницы; В качестве сборщика используйте Webpack, если это необходимо; Технические требования: Использование следующего стека технологий: Vue 3 (Composition Api) + TypeScript; Nuxt 3 - опционально; State менеджер - pinia, допустимо использование vuex Приложение должно быть разбито на разумное количество Vue - компонентов; Адаптивность приветствуется, но не обязательна; Верстка без использования css-фреймворков
Flatstack • Высокая сложность
Тестовое задание по JavaScript от компании Flatstack
Тестовое задание на вакансию Front-end разработчика Задание Мы предлагаем создать front-end приложение для оформления покупки в интернет-магазине в соответствии с макетами (см. исходные материалы). На выбор мы предлагаем 2 варианта: (с использованием фреймворков) или (без). Обратите внимание, что предполагается функция автоопределения адреса доставки по геоданным. Формы должны иметь валидацию, а некоторые поля предполагают автоподстановку. Также на этапе после оформления заказа есть функция вывода текущей страницы на печать. Печатная версия должна быть адаптирована под черно-белую печать. Требования к работе HTML Семантичная адаптивная верстка CSS Использование Pre/Post процессоров (SCSS/SASS, Stylus, LESS, PostCSS) Использование соглашений/архитектур написания стилей MVCSS/Bem и т.п. Можно использовать ui-фреймворки (Bootstrap/Foundation/Semantic UI и т.п.), либо просто сетки. JS Данная форма может быть реализована как на нативном javascript (es5/es6) (1), так и с использованием одного из популярных фреймворков (2). При оценке мы обращаем внимание на: Продуманную архитектуру приложения Настроенный процесс CI/CD Наличие тестов Вариант 1 Код должен быть структурирован, реализован в рамках парадигм MVC/MVVM/Functional programming. Можно использовать как реализацию классов, так и прототипно-ориентированное программирование. Можно использовать jQuery для работы с DOM, можно использовать Lodash/Underscore или др. Подобные библиотеки для работы с данными, массивами, объектами (однако приветствуется использование стандартных методов из ES6) Желательно использовать модули (Common.js/AMD и т.п.) Желательно использовать событийную модель общения между модулями Желательно иметь настроенный task-manager для сборки и запуска кода Желательно некоторые сущности разбить на отдельные сервисы (сервис обработки ошибок, сервис autocomplete, и т.п.) со специфичным интерфейсом Вариант 2 Все, описанное в предыдущем варианте, применимо и тут. Однако в этом варианте важно написать приложение в рамках устоявшихся практик того или иного фреймворка. При этом на собеседовании вас все равно будут спрашивать о том, как бы вы реализовали это без использования фреймворка (важно, чтобы у испытуемого было общее фундаментальное понимание js и устройства таких приложений). Желательно иметь настроенный task-manager или взаимозаменяемую тулзу (webpack + npm например) для сборки и запуска кода. Или, как минимум, иметь соответствующее окружение Грамотно реализовать общение между модулями в рамках имеющихся для этого в фреймворках сущностей Можно использовать готовые решения для какого-то имеющегося функционала Примечания Плюсом будет наличие автоматизированных тестов. Исходные материалы Прототип: https://invis.io/U773MCDH8 Sketch-файл: front-end-tt.sketch Figma-файл: front-end-tt.fig Результат вашей работы необходимо опубликовать (github pages, heroku, e t.c.)
DAO TECH • Лёгкая сложность
Тестовое задание по JavaScript от компании DAO TECH
Создать компонент соответствующий нижеуказанным требованиям. Для стилизации можно использовать любой css-фреймворк (например, bootstrap). Докеризация проекта и наличие корректно составленного файла readme с инструкциями по запуску обязательна. Junior • Добавление новой записи; • Отображение списка добавленных записей; • Удаление из списка добавленных записей; Junior + • Добавление новой записи; • Новая запись добавляет при условии, что её длина меньше N символов или • • равна ей; • Отображение списка добавленных записей; • Удаление из списка добавленных записей; • Переключение статуса записи Выполнено / Невыполненный при клике на её название; Middle • Добавление новой записи; • Новая запись добавляет при условии, что её длина меньше N символов или равна ей; • Отображение списка добавленных записей; • Переключение статуса записи Выполнено / Невыполненный при клике на её название; • Фильтрация по типу (все, выполненные, невыполненные); • Отображение счётчика выполненных и невыполненных задач; Middle + • Добавление новой записи; • Новая запись добавляет при условии, что её длина меньше N символов или равна ей; • Отображение списка добавленных записей; • Переключение статуса записи Выполнено / Невыполненный при клике на её название; • Фильтрация по типу (все, выполненные, текущие); • Отображение счётчика выполненных и невыполненных задач; • Использование хранилища (Redux, Mobx);
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.
без ограничений.
Чтобы получить полный доступ,
вам необходимо зарегистрироваться.