Тестовые задания по JavaScript
Здесь собраны реальные тестовые задания, которые дают соискателям на стажировках и junior-позициях. Эти задания помогут лучше подготовиться к отбору, потренироваться и пополнить портфолио
BellIntegrator • Средняя сложность
Тестовое задание по JavaScript от компании BellIntegrator
Тестовое задание Frontend JS Реализовать одностраничное приложение резервирования билетов в кинотеатр. Время начала сеансов 10.00, время последнего сеанса 20.00. Шаг каждые - 2 часа. Таким образом в течение дня может быть 6 сеансов. Интерфейс должен отображать доступные даты для бронирования, сеансы для выбранной даты, свободные и забронированные места. При выборе даты и сеанса меньше текущего времени и даты, должны отображаться архивные данные без возможности их изменения. Для хранения дат использовать LocalStorage, и при перезагрузке страницы считывать данные из LocalStorage. Глубина архива: одна неделя до текущей даты. Максимальный период бронирования: одна неделя от текущей даты. Кроссбраузерная верстка(мин. IE 10). Реализовать на JavaScript/JQuery/HTML5/CSS3
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.)
Appbooster • Лёгкая сложность
Тестовое задание по JavaScript от компании Appbooster
Тестовое задание: frontend Напишите SPA для конвертирования валют. Для получения текущих курсов найдите и используйте любое отрытое API. Приложение должно состоять из двух страниц: Конвертер из одной валюты в другую. На этой странице должно быть текстовое поле, в которое можно ввести текст в виде 15 usd in rub и получить результат. Страница с текущими курсами валют. На этой странице пользователь должен видеть «свежие» курсы валют относительно базовой валюты — например, если базовая валюта — рубль, то пользователь видит, что 1 USD = 63.49 RUB, а 1 EUR = 72.20 По-умолчанию у пользователя должна определяться «базовая» валюта, которую он может настроить. Плюсом будет: Хорошо продуманный интерфейс и внешний вид Тесты Максимальная скорость работы приложения (как при загрузке приложения, так и при конвертировании валют) Для реализации используйте Любые библиотеки, которые считаете уместными
без ограничений.
Чтобы получить полный доступ,
вам необходимо зарегистрироваться.