Тестовое задание. Каталог авто

Расскажу о тестовом задании для компании, в которую я устраивался на позицию 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