Расскажу о тестовом задании для компании, в которую я устраивался на позицию Front-end developer, читай Junior Javascript developer.
В последнее время меня сильно заинтересовали инструменты React. js и Vue.js. Я сделал с их использованием Додо, несколько мелких проектов для тренировки и доделываю beProff.
Я понимаю, что весь основной опыт я быстро получил в офисе, почему?
На первой должности верстальщика в компании я начинал с нуля и был единственным, кто верстает.
Я не из тех, кто говорит что не умеет или не может. Руководитель ставил задачу сделать — я рыл землю зубами и находил решение, а задачи были интересные и сложные.
В офисе ты не скажешь что ты не хочешь делать задачу, тебе ее поставили, ты обязан ее выполнить. Поэтому опыт набирается так быстро.
Перед тем как устроится туда, я перебирал бесплатные макеты для тренировки и при выборе если находил что-то сложное, я «сливался». Придумывал причину, по которой не буду верстать этот проект.
Та же ситуация у меня сейчас с React/Vue. Я хочу получить много опыта, но понимаю, что на фрилансе этот опыт будет идти медленно и планирую устроиться на работу в какую-нибудь московскую компанию.
Вот там на меня опять посыпется куча задач которые мне нужно будет выполнить и от которых нельзя отказаться.
…
Так, да, тестовое задание.
На входе мне дали:
— картинку как должно выглядеть
— файл с автомобилями (массив)
— координаты пользователя на карте (расскажу зачем чуть позже)
Прежде чем читать, думаю лучше посмотреть каталог вживую, он адаптивен для мобильных.
Ссылка: https://dev-postnov.ru/works/vue-apps/auto-catalog/
Как посмотришь — возвращайся, я жду.
Нужно сделать каталог автомобилей. В каталоге предусмотрена сортировка по цене и удаленности от дилера.
С удаленностью интересная штука. В файле с автомобилями в графе «дилер» у каждой машины не удаленность, нет
там координаты на карте.
Из этого вытекает задача — нужно для дилера каждой машины просчитать расстояние от пользователя по заданным координатам и записать их в начальные данные дилера. А потом сортировать по этой удаленности.
Это лучшая часть тестового задания, которая качнула мой скилл еще больше.
Едем дальше.
У каждой машины есть особенности:
— 2 руля
— металл кузова: чугун
—
И вот эти особенности нужно показывать не полностью, всего 3 штуки, а остальные, сколько бы их ни было, нужно спрятать и сделать кнопку «показать X особенностей».
X — количество оставшихся особенностей. Тут вроде все просто: показать 3, остальные скрыть, а в X записать количество всех особенностей — 3.
Вроде бы все, а нет, задача на этом не заканчивается. Когда я запустил код и просмотрел текст, увидел такие: «Показать 4 особенностей».
Не вяжется.
Слово «особенностей» должно содержать правильное окончание в зависимости от количества: «особенностей», «особенности», «особенность». И для этого я припрятал код еще когда делал время для чтения статьи
После выполнения задания я решил добавить от себя поиск, но не просто по названию машины, а еще по названию, адресу, городу дилера.
Все проверить и пощелкать на сайте: https://dev-postnov.ru/works/vue-apps/auto-catalog/.
Github для разработчиков: https://github.com/Postnov/auto-catalog