Тестовые задания по 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/
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) требований к реализации, без ошибок. Желаем удачи!
DAO TECH • Лёгкая сложность
Тестовое задание по JavaScript от компании DAO TECH
Создать компонент соответствующий нижеуказанным требованиям. Для стилизации можно использовать любой css-фреймворк (например, bootstrap). Докеризация проекта и наличие корректно составленного файла readme с инструкциями по запуску обязательна. Junior • Добавление новой записи; • Отображение списка добавленных записей; • Удаление из списка добавленных записей; Junior + • Добавление новой записи; • Новая запись добавляет при условии, что её длина меньше N символов или • • равна ей; • Отображение списка добавленных записей; • Удаление из списка добавленных записей; • Переключение статуса записи Выполнено / Невыполненный при клике на её название; Middle • Добавление новой записи; • Новая запись добавляет при условии, что её длина меньше N символов или равна ей; • Отображение списка добавленных записей; • Переключение статуса записи Выполнено / Невыполненный при клике на её название; • Фильтрация по типу (все, выполненные, невыполненные); • Отображение счётчика выполненных и невыполненных задач; Middle + • Добавление новой записи; • Новая запись добавляет при условии, что её длина меньше N символов или равна ей; • Отображение списка добавленных записей; • Переключение статуса записи Выполнено / Невыполненный при клике на её название; • Фильтрация по типу (все, выполненные, текущие); • Отображение счётчика выполненных и невыполненных задач; • Использование хранилища (Redux, Mobx);
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/
без ограничений.
Чтобы получить полный доступ,
вам необходимо зарегистрироваться.