Тестовые задания по 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 Локализацию на английский Наводящие вопросы: Какие сложности могут возникнуть при размещении формы на сторонних сайтах? Какие вы можете выделить наиболее важные характеристики виджетов, встраиваемых на сторонние сайты?
BellIntegrator • Средняя сложность
Тестовое задание по JavaScript от компании BellIntegrator
Тестовое задание Frontend JS Реализовать одностраничное приложение резервирования билетов в кинотеатр. Время начала сеансов 10.00, время последнего сеанса 20.00. Шаг каждые - 2 часа. Таким образом в течение дня может быть 6 сеансов. Интерфейс должен отображать доступные даты для бронирования, сеансы для выбранной даты, свободные и забронированные места. При выборе даты и сеанса меньше текущего времени и даты, должны отображаться архивные данные без возможности их изменения. Для хранения дат использовать LocalStorage, и при перезагрузке страницы считывать данные из LocalStorage. Глубина архива: одна неделя до текущей даты. Максимальный период бронирования: одна неделя от текущей даты. Кроссбраузерная верстка(мин. IE 10). Реализовать на JavaScript/JQuery/HTML5/CSS3
без ограничений.
Чтобы получить полный доступ,
вам необходимо зарегистрироваться.