Тестовые задания по JavaScript
Здесь собраны реальные тестовые задания, которые дают соискателям на стажировках и junior-позициях. Эти задания помогут лучше подготовиться к отбору, потренироваться и пополнить портфолио
23devs • Лёгкая сложность
Тестовое задание по JavaScript от компании 23devs
1. Реализовать html-страницу с формой регистрации. Список полей формы: ● Имя; ● Фамилия; ● Email; ● Пароль; ● Подтверждение пароля; ● Дата рождения. Так же должна присутствовать кнопка "Отправить". Ко всем полям должны быть соответствующие заголовки. Требований по расположению формы, заголовков и полей ввода нет. 2. Реализовать валидацию полей формы средствами Javascript. Требования к валидации полей формы: ● Поля Имя и Фамилия содержат только допустимые символы для имени и фамилии и должны иметь адекватное ограничение по длине. Адекватность длины придется обосновывать. ● Поле Электронный адрес должно содержать только валидный email-адрес. ● Значения полей Пароль и Подтверждение пароля должны совпадать. ● Минимальная длина пароля 8 символов. Пароль должен содержать минимум одну цифру, по одной заглавной и строчную буквы и один символ. ● Возраст пользователя на момент регистрации в форме должен быть не младше 18 лет. ● Валидация данных должна происходить после ввода пользователем и потере фокуса на элементе формы. Кнопка "Отправить" должна быть заблокирована свойством "disabled", пока пользователь не введёт валидные значения. ● Пользователь должен иметь возможность понять ошибку(и) и исправить их с минимальным количеством попыток. Требования к реализации: 1. Использование любых JS-фреймворков категорически неприемлемо. При невозможности реализовать без JS-фреймворка просьба сообщить об этом сразу. 2. Использование любых примеров, найденных в интернете, которые реализуют ту или иную часть задания, категорически неприемлемо. 3. Код должен запуститься в браузерах Firefox, Chrome и Edge последних версий. 4. Типы элементов формы должны соответствовать вводимым значениям. 5. HTML-код страницы должен проходить валидацию через https://validator.w3.org/ Все предупреждения, ошибки и предложения по оптимизации кода, которые выдает валидатор, должны быть устранены (в случае предложений по оптимизации - должны быть учтены). 6. Каждый элемент формы должен иметь атрибут id, включая сообщения, используемые для валидации. 7. Придерживаемся следующих наименований для инпутов: ● id="first-name" ● id="last-name" ● id="email" ● id="password" ● id="password-confirm" ● id="birth-day" ● id="form-button" 8. По результатам валидации, теги form и все элементы формы ( теги input / textarea / etc ) дополняются классом "invalid" в случае невалидности формы / элемента формы и "valid" в случае валидности. 9. Сразу после валидного заполнения формы кнопка отправки должна быть разблокирована, т.е. не требуется делать клик вне формы для разблокировки кнопки. 10. Результат задания должен быть в виде zip архива со всеми необходимыми файлами для его работы. После распаковки архива, результат задания должен открываться в браузерах, описанных в пункте (3) требований к реализации, без ошибок. Желаем удачи!
BellIntegrator • Средняя сложность
Тестовое задание по JavaScript от компании BellIntegrator
Тестовое задание Frontend JS Реализовать одностраничное приложение резервирования билетов в кинотеатр. Время начала сеансов 10.00, время последнего сеанса 20.00. Шаг каждые - 2 часа. Таким образом в течение дня может быть 6 сеансов. Интерфейс должен отображать доступные даты для бронирования, сеансы для выбранной даты, свободные и забронированные места. При выборе даты и сеанса меньше текущего времени и даты, должны отображаться архивные данные без возможности их изменения. Для хранения дат использовать LocalStorage, и при перезагрузке страницы считывать данные из LocalStorage. Глубина архива: одна неделя до текущей даты. Максимальный период бронирования: одна неделя от текущей даты. Кроссбраузерная верстка(мин. IE 10). Реализовать на JavaScript/JQuery/HTML5/CSS3
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.)
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.
без ограничений.
Чтобы получить полный доступ,
вам необходимо зарегистрироваться.