Тестовые задания по 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) требований к реализации, без ошибок. Желаем удачи!
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) требований к реализации, без ошибок. Желаем удачи!
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.
без ограничений.
Чтобы получить полный доступ,
вам необходимо зарегистрироваться.